如果元素在包装器元素内，如何使 CSS div 宽度等于浏览器宽度答案

【问题标题】：How to make CSS div width equal to browser width if element is inside wrapper element如果元素在包装器元素内，如何使 CSS div 宽度等于浏览器宽度
【发布时间】：2013-10-16 15:51:55
【问题描述】：

到目前为止我所拥有的：

<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 的宽度必须与浏览器的窗口宽度相同）但包装元素仍然必须只有 980px 宽

【问题讨论】：

标签： css

【解决方案1】：

我现在看到的你的问题让我非常抓狂，因为它根本不符合你的代码。所以，我已经尝试为您制定多种选择。

无法得到你想要的 - 案例 #1

应用 position:absolute 或 position:relative 到元素，如果你想让 .element 超过它的父容器，这将使它脱离正常流程。（我对你的理解正确吗？这就是你想要的吗？）

你想要什么（案例 #2）： 如果您希望 .element 与浏览器（窗口？）一样宽，为什么要使用 width:10000px？使用绝对定位（见案例#1）和宽度：100%

案例#3： 如果您不想看到 .element 的水平滚动条，请使用 overflow:auto 或 overflow:hidden，而不是 :visible（或者如果它不是继承的，则直接将其删除）。

案例#4： 如果您想隐藏文档宽度小于 10000 像素时可能出现的 WINDOW 水平滚动条，请使用案例 #2 或将 overflow:hidden 添加到父 div

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

【讨论】：

感谢您的宝贵时间。案例#2 是正确的。我已经更新了 jsfiddle：jsfiddle.net/8cyHR/1 .element 的左侧仍然从 .body 元素开始，而不是在 .wrapper 元素
1) 将“left:0”添加到绝对定位元素...和“top:0”，如果您还需要垂直定位。 2）如果它满足您的需求，请接受答案;-)

【解决方案2】：

最简单的解决方案...您的 CSS 无法承受是从包装器中取出特定的 div。毕竟没有理由不能拥有多个包装器。

<div class="wrapper">
    <div ></div>
</div>

<div class="element"> </div>

<div class="wrapper">
    <div ></div>
</div>

JSFiddle

【讨论】：