如何在頁面的全部高度製作三列？

我有一個頁面設置了3列：一個主要的內容div，以及任何一方的陰影/邊框。如何在頁面的全部高度製作三列？

我需要兩邊的「影子」的div轉到頁的底部。我怎樣才能做到這一點？

例HTML

<div id="wrapper"> 
     <div id="left"></div> 
     <div id="main"> 
      <div id="content"></div> 
     </div> 
     <div id="right"></div> 
    </div>

範例CSS

html, body {height: 100%;} 
#wrapper {height: 100%;} 
#left {background: #555; width: 30px; height: 100%; float: left;} 
#main {background: #999; width: 300px; float: left;} 
#content {height: 2000px;} 
#right {background: #555; width: 30px; height: 100%; float: left;}

來源

2013-02-14 Sam

我給雙方一個容器......這樣的：

<html> 
<body> 
    <div id="wrapper"> 
     <div id="sides_container"> 
      <div id="left">Left Banner</div> 
      <div id="right">Right Banner</div> 
      <div id="main"> 
       <div id="content">Hello</div> 
      </div> 

     </div> 
    </div> 
</body>

然後CSS這樣的：

html, body {height: 100%} 
#wrapper {height: 100%} 
#sides_container{width:360px; margin-left:auto; margin-right:auto; background:#555;} 
#left {background: #555; width: 30px; height: 100%; float: left} 
#main {background: #999; width: 300px; margin-right:auto; margin-left:auto;} 
#content {height: 2000px} 
#right {background: #555; width: 30px; height: 100%; float: right;}

我喜歡集中爲好，對不起... http://jsfiddle.net/uhJHF/

來源

2013-02-14 02:48:41 Webb

我更喜歡這個。代碼少，不需要重新定位。 – Sam 2013-02-14 21:03:39

如果「影子」的div有position: fixed，他們將留在100％的高度。但是，這可能會遮擋部分內容，而右側的陰影將與左側對齊。要解決這個問題，請使右側div的left值等於兩個div合併的寬度，並向主div添加左側頁邊距。

http://jsfiddle.net/rfPJC/

來源

2013-02-14 02:17:44

完美！更新了jsfiddle以正確顯示。 http://jsfiddle.net/rfPJC/ – Sam 2013-02-14 02:22:39

如何在頁面的全部高度製作三列？

回答

相關問題