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標籤不應占用空間

回答

相關問題