如果元素在包装器元素内部，如何使CSS div宽度等于浏览器宽度 [英] How to make CSS div width equal to browser width if element is inside wrapper element

问题描述

到目前为止我所拥有的:

What I have so far:

<style>
.wrapper {
    width:980px;
    border:1px solid red;
}

.element {
    width:10000px;
    overflow:visible;
    margin-left:-2000px;
    height: 20px;
    margin-top:100px;
    margin-bottom:100px;
    border: 1px dotted green;
}
</style>
<div class="wrapper">
    <div class="element">
    </div>
</div>

http://jsfiddle.net/8cyHR/

我要删除水平滚动条(.element必须具有与浏览器窗口宽度相同的宽度)，但是wrapper元素仍必须仅980px宽

I want to remove horizontal scrollbar (.element must have the same width as browser's window width) but wrapper element still must be only 980px wide

推荐答案

您所看到的问题现在让我非常疯狂，因为它根本与您的代码不匹配.因此，我尝试为您制定出多种选择.

Your question as I see it now drives my absolutely crazy, since it does not match your code at all. So, I've tried to work out multiple options for you.

不能得到您想要的东西-案例1

如果您想让.element大于其父容器，则相对于该元素应用position:absolute或position:相对于元素，这将使它脱离正常流程.(我是否正确理解了您?这就是您想要的吗?)

Apply position:absolute or position:relative to the element, which will take it out of the normal flow, if you'd like to let .element be more than it's parent container. (have I understood you correctly? That's what you want?)

您要做什么(案例2):如果您希望.element与浏览器一样宽(窗口?)，为什么要使用width:10000px?使用绝对定位(请参阅案例1)和width:100％

What do you want (case #2): If you'd like .element to be as wide as browser (window?), why do you use width:10000px?? use absolute positioning (see case #1) and width:100%

案例3:如果您不想看到.element的水平滚动条，则可以使用overflow:auto或overflow:hidden而不是:visible(或者如果不继承，则将其删除).

Case #3: if you don't want to see a horizontal scrollbar of an .element, than do overflow:auto, or overflow:hidden, instead of :visible (or simply remove it if it's not inherited).

案例4:如果您想隐藏文档宽度小于10000px时可能发生的WINDOW的水平滚动条，请使用案例2或在父div中添加overflow:hidden

Case #4: If you'd like to hide horizontal scrollbar of the WINDOW that may occur when your document is less than 10000px wide, use case #2 or add overflow:hidden to the parent div

PS.为什么要使用margin-left:-2000px?:-)仅用于演示目的吗?希望如此

PS. Why should one want to use margin-left:-2000px? :-) Is it for demonstration purposes only? Hope so

这篇关于如果元素在包装器元素内部，如何使CSS div宽度等于浏览器宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！