Question

我有一个带有以下CSS的居中包装器：

div.wrapper {
width: 1170px;
padding-left:30px;
margin-top: 80px;
margin-bottom:20px;
margin-left: auto;
margin-right: auto;
position:relative;  
background-color:black; }

里面我有一个跟随css的div：

position:absolute;
top:-26px;
left:517px;
height:63px;
z-index:3;

这个div的内部是一个宽度为759px的图像，这使得包装器变得更大，并使浏览器在较低的显示分辨率下显示v滚动条。我想要的是让图像超出包装器但阻止浏览器显示滚动条，这样只有当浏览器窗口足够大且包装器保持1200px宽度时才会显示图像的右侧。我无法将其作为背景图像，因为它会覆盖其他一些内容。与＆gt; = IE7兼容的东西会很好。

我上传了一张照片以显示我的意思： http://img153.imageshack.us/img153/6070/hpx.jpg

蓝色框是包装器，宽度为1200px，并且始终在窗口中居中（除非窗口小于1200px，然后滚动）红色框是图像（绿色条不是它的一部分）

4 个答案:

答案 0 :(得分：4)

答案 1 :(得分：2)

答案 2 :(得分：2)

答案 3 :(得分：1)

Answer 1

您可以将overflow: hidden设置为包装器，以便不会显示超出包装器尺寸的内容。

参见 overflow

Answer 2

您正在寻找#your_div { overflow: hidden; }，如果您希望隐藏您的内容。或#your_div { overflow: visible; }如果您希望您的内容在div之外可见。

Answer 3

根据您的要求，唯一可以想到的方法是将内部元素移出该包装div并将其相对于整个窗口定位：

<body>
  <div class="abs">the div with the image</div>
  <div class="wrapper">the wrapper div</div>
</body>

不幸的是，这可能意味着你无法很好地定位它。您可能需要使用Javascript来获取页面的宽度/高度和/或包装div的位置，并相应地计算偏移量。（您将在这些位上找到有关Stack Overflow的问题。）

Answer 4

问题在于img是内联的。没有经过测试，但您应该'显示：阻止'图像，然后浮动它或绝对定位它。

CSS - 当div超出窗口时，如何防止浏览器显示滚动条？

4 个答案: