div标签不应占用空间

#decoration在#wrapper之外延伸一点。问题是，如果浏览器视口是910px，会出现一个垂直滚动条。div标签不应占用空间

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

编辑：

看看这个链接查看我想要的东西。就这样，没有垂直滚动条。

使用溢出：隐藏将剪辑#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>

来源

2011-03-21 Cudos

你可以设置你的问题的演示或屏幕截图？ – JohnP 2011-03-21 16:17:50

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

来源

2011-03-21 16:25:04 thirtydot

捕捉，＆+1感谢dummyimage生成器站点提示！ – clairesuzy 2011-03-21 17:04:41

我觉得我的问题很差。这里有一个链接澄清：http://jsfiddle.net/HLqwN/ – Cudos 2011-03-21 17:40:17

你是对的 - 你的问题有点不清楚。但是，在您澄清之后，我想我明白了。我添加了一个“outer wrapper”，它具有'overflow：hidden'和'min-width：500px'。现在，“装饰”的伸出部分不会导致滚动条出现。请参阅：http://jsfiddle.net/HLqwN/1/ – thirtydot 2011-03-21 23:18:42

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

来源

2011-03-21 16:16:37 Alex

将无法工作。 #decoration的一部分将被裁剪，其中#wrapper右边框停止 – Cudos 2011-03-21 16:22:38

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

如果它只是一个装饰，你应该尝试做一个背景图像，然后你不必担心剪裁。

来源

2011-03-21 16:17:49

如果它是一个装饰图像，也许你应该将它用作包装器上的背景图像而不是HTML源代码，你仍然可以将它放置在660px的左边，它不会导致内容滚动条，因为它不是内容。 [更新后的澄清]

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

行，所以你要装修重叠包装是否有可用空间的话，就像一个弹出？

是那么试试这个，fiddle

注：跨距保持的背景图像应该是包装外，在跨度没有宽度使用你的左坐标，右：1;或者您可能喜欢的任何边距，并仍将该图像用作背景图像。跨度可以坐下你的HTML底部的方式

来源

2011-03-21 16:24:34 clairesuzy

div标签不应占用空间

回答

相关问题