Question

到目前为止我所拥有的：

<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宽

Answer 1

我现在看到你的问题让我非常疯狂，因为它根本不符合你的代码。所以，我试图为你找出多种选择。

无法得到你想要的东西 - 案例＃1

应用position：absolute或position：相对于元素，如果你想让.element超过它的父容器，它将把它从正常流程中取出。（我理解你了吗？那就是你想要的？）

你想要什么（案例＃2）： 如果你想.element和浏览器一样宽（窗口？），你为什么要使用宽度：10000px ??使用绝对定位（参见案例＃1）和宽度：100％

案例＃3： 如果您不希望看到.element的水平滚动条，请执行overflow：auto或overflow：hidden，而不是：visible（或者只是在未继承的情况下删除它）。

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

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

Answer 2

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

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

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

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

JSFiddle

如果element在wrapper元素中，如何使CSS div宽度等于浏览器宽度

2 个答案: