Question

#decoration在#wrapper之外延伸了一点。问题是如果浏览器视口是910px，则会出现垂直滚动条。

如何使#decoration不占用空间，以免出现垂直滚动条。

修改

查看此链接以查看我想要的内容。就这样，没有垂直滚动条。

使用overflow：hidden将剪切#decoration的一部分，使其不起作用。

<head>
    <style>
        #wrapper {
            width: 900px;
            position: relative;
        }
        #decoration {
            position: absolute;
            width: 542px;
            height: 126px;
            top: 0;
            left: 660px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <img id="decoration" src="/images/decoration.png" alt="" title="" />
        <div id="content">
            Some content
        </div>
    </div>
</body>

Answer 1

如果它是装饰图像，也许您应该将它用作包装器而不是HTML源中的背景图像，您仍然可以将其放置在660px左侧，然后它不会导致内容滚动条，因为它不是内容。

#wrapper {
   width: 900px;
   position: relative;
   background: url(background.png) no-repeat 660px 0;
}

[澄清后更新]

好的，如果有可用的空间，你想让装饰与包装器重叠，就像弹出窗口一样？

试试这个，fiddle

注意：保持背景图像的跨度应该在包装器外面，跨度上没有宽度使用左侧坐标和右侧：0;或者您可能喜欢的右边距，并仍然使用图像作为背景图像。跨度可以放在HTML的底部

Answer 2

你可以设置overflow: hidden，正如其他答案所暗示的那样。

但是，“装饰”图片不应该是<img>，而应该是CSS background-image。

像这样：

#wrapper {
    height: 126px;
    background: #ccc url(http://dummyimage.com/542x126/f0f/fff) 660px 0 no-repeat
}

请参阅：http://jsfiddle.net/rdSJH/

Answer 3

你可以使用overflow：hidden;在你的包装上

Answer 4

您可能希望在装饰图像周围包裹div并在其上设置overflow:hidden。在包装器上设置overflow:hidden可能会导致其他内容被剪裁，具体取决于您的布局。

如果只是装饰你应该尝试使用背景图片，那么你不必担心剪裁。

div标签不应占用空间

4 个答案: