（約列）CSS佈局問題

Question

我有這樣的HTML結構

<div id="header"> 
    … 
</div> 
<div id="menu"> 
    ... 
</div> 
<div id="content"> 
    ... 
</div> 
<div id="footer"> 
    ... 
</div> 

而CSS：

#header { 
    height: 100px; 
} 

#footer { 
    border: 1px solid #989898; 
    padding-bottom: 0.1em; 
    width: 100%; 
    height: 2.2em; 
    position: fixed; 
    bottom: 0px; 
    left: 0px; 
} 

#menu { 
    width: 150px; 
    float: left; 
    ??? 
} 

#content { 
    ??? 
} 

頁眉和頁腳是好的，但問題來了，從菜單和內容的div：

'menu'div必須從頁眉填充到頁腳，而不滾動

'content'必須顯示滾動條件ssary。

他們的CSS代碼會使它變成真實的嗎？

感謝

Answer 1

我試過你的答案，但效果不理想，所以最後我做了更好的解決方案對我來說：

http://jsfiddle.net/cVdeT/

Answer 2

我很久以前有過這樣的問題，希望這將有助於

HTML

 

<div id="wrapper"> 
    <div id="header"> 
    ... 
    </div> 
    <div id="menu"> 
    ... 
    </div> 
    <div id="content"> 
    ... 
    </div> 
    <div id="footer"> 
    ... 
    </div> 
</div> 
 

CSS

 

#wrapper 
{ 
    position: relative; 
    ... 
    ... 
} 

#header 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100px; 
} 

#footer 
{ 
    position: absolute; 
    bottom: 0; 
    height: XXXpx; 
    display: block; 
} 

#menu 
{ 
    position: absolute; 
    top: 110px; 
    left: 0; 
    bottom: 0; 
    width: 150px; 
    height: 100%; 
    display: block; 
} 

#content 
{ 
    position: absolute; 
    top: 110px; 
    left: 160px; 
    width: XXXpx; 
    display: block; 
} 
 

Answer 3

我的辦法是包「菜單'和'內容'在他們自己的包裝中，就像這樣：

<div id='contentWrapper'> 
    <div id="menu"> 
     .... 
    </div> 
    <div id="content"> 
     .... 
    </div> 
</div> 

樣式化這樣的：

#contentWrapper { 
     width: 1000px; 
     overflow: hidden; 
     background-color: yellow; 
    } 

    #menu { 
     width: 150px; 
     float: left; 
     background-color: transparent; 
    } 

    #content { 
     width: 850px; 
     float: left; 
     background-color: white; 
    } 

的顏色是有來說明。實際上，菜單的高度仍然與往常一樣高，並且會隨着您放入的任何菜單而延伸，但它總是會呈現出「內容」的整個高度，因爲您可以透過它看到它的背景來自包裝的顏色 - 它圍繞着菜單和內容。

Answer 4

試試這個

#menu { width: 150px; height: 100%; overflow-y: auto; display: block; }