网站布局高度问题

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个坐标，可以使宽度和/或高度动态的，当你调整我的小提琴，你会发现。另请注意，我删除了边框，并将其更改为背景颜色，导致边框添加到元素的宽度/高度。你可以保留边界，但是在设置坐标时你必须考虑到它们（以及填充）。