網站佈局高度問題

Question

基本上，我不知道如何解決它，我需要左右列從頁眉到頁腳100％的高度。這樣我就可以調整窗口大小，一切都會保持在同一個地方。

但是，我的代碼不起作用，左側和右側列重疊頁腳。

HTML：

<section id="wrapper"> 

<header id="topHeader"> 
header 
</header> 

<section id="leftSection"> 
left<br> 
</section> 


<section id="middleSection"> 
middle 
</section> 

<section id="rightSection"> 
right 
</section> 



</section> 
<footer id="footer"> 
footer 
</footer> 

CSS：

html,body{ 
    margin: 0; 
    padding: 0; 
    font: 13px/22px Helvetica, Arial, sans-serif; 
    background: #F0F0F0; 
    height:100%; 
} 

#wrapper{ 
border: solid 1px; 

height: 100%; 
} 


#topHeader{ 
height: 40px; 
} 

#leftSection{ 
border: solid 1px; 
border-color: #000000; 

position: absolute; 
left: 0px; 
width: 150px; 
margin: 0px; 
padding: 0px; 

height: 92%; 
min-height:200px; 
max-height:600px; 
} 

#rightSection{ 
border: solid 1px; 
border-color: #000000; 

position: absolute; 
right: 0px; 
top:41px; 
margin-bottom: 41px; 
width: 200px; 
color: #564b47; 
margin: 0px; 
padding: 0px; 

height: 100%; 
} 

#middleSection{ 
border: solid 1px; 
border-color: #000000; 

margin: 0px 201px 0px 151px; 
padding: 0px; 

height:auto; 
} 

#footer{ 
border: solid 1px; 
border-color: #000000; 

clear:both; 
height: 100px; 
width:100%; 
} 

http://jsfiddle.net/bPTtU/

Answer 1

只要你的頁眉和頁腳有一個固定的高度，和側邊欄有一個固定的寬度，你應該罰款與絕對定位。看看這個：http://jsfiddle.net/bPTtU/29/

除了標題，所有的塊都是絕對定位的。 該技術是安靜簡單：

top: #px; /* outer height of the content above */ 
left: #px; /* outer width of the content to the left */ 
right: #px; /* outer width of the content to the right */ 
bottom: #px; /* outer height of the content below */ 

通過定位絕對（或固定）時設置超過2個座標，可以使寬度和/或高度動態的，當你調整我的小提琴，你會發現。另請注意，我刪除了邊框，並將其更改爲背景顏色，導致邊框添加到元素的寬度/高度。你可以保留邊界，但是在設置座標時你必須考慮到它們（以及填充）。