#decoration 在#wrapper 之外扩展了一点。问题是,如果浏览器视口(viewport)为 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>
最佳答案
您可以设置overflow: hidden
正如其他答案所暗示的那样。
但是,“装饰”图像不应该是 <img>
, 它应该是一个 CSS background-image
.
像这样:
#wrapper {
height: 126px;
background: #ccc url(http://dummyimage.com/542x126/f0f/fff) 660px 0 no-repeat
}
关于css - div标签不应该占用空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5380414/