div标签不应占用空间

时间:2011-03-21 16:03:55

标签: css

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

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

修改

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

http://jsfiddle.net/HLqwN/

使用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>

4 个答案:

答案 0 :(得分:3)

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

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

[澄清后更新]

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

试试这个,fiddle

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

答案 1 :(得分:3)

可以设置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/

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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

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