css - div标签不应该占用空间

标签 css

#decoration 在#wrapper 之外扩展了一点。问题是,如果浏览器视口(viewport)为 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>

最佳答案

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

关于css - div标签不应该占用空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5380414/

相关文章:

html - 拉伸(stretch) 4 列模板,中间有两个固定列和自定义 SOC。可能的?

CSS 缩放图像上的 Javascript 转换效果不佳

html - 什么时候使用 DIV 而不是 TABLE 更合适,反之亦然?

html - 在使用 ngIf 的下拉按钮上优化 css

html - CSS:如何在高度有限的框中设置文本样式

html - 更改图像(的颜色)以及悬停/单击时的链接

javascript - 无法让 jQuery div 覆盖 div

javascript - jQuery:实际的div宽度

html - 标签复选框的单独 CSS 到标签输入

Jquery 鼠标滚轮事件不适用于移动设备