我对网页的基本布局有一些疑问。我想要的是以下内容:页眉，然后是页面内容，左侧是菜单，右侧是内容，还有页脚。如果内容和菜单的长度都不超过一个页面，这个页脚应该位于页面底部，两个内容 div 都向上延伸到页眉。如果内容超过页面长度，从而显示滚动条，则页脚应位于内容的底部。
我目前拥有的是标题和内容的两列，高度相同，使用 this page .页脚当前位于页面底部，但当内容超过页面长度时，它会保留在那里。
这是当前代码:
CSS:
html, body{
margin:0px;
height:100%;
}
#container{
height:100%;
width:1024px;
margin:auto;
}
#header{
width:100%;
height:100px;
background:purple;
}
#container2{
float:left;
width:1024px;
background:yellow;
overflow:hidden;
position:relative;
}
#container1{
float:left;
width:1024px;
background:red;
position:relative;
right:874px;
}
#col1{
float:left;
width:150px;
position:relative;
left:874px;
overflow:hidden;
}
#col2{
float:left;
width:874px;
position:relative;
left:874px;
overflow:hidden;
}
#footer{
width:1024px;
background:purple;
position:absolute;
bottom:0px;
height:30px;
}
html:
<body>
<div id='container'>
<div id='header'>
This is the header.
</div>
<div id='container2'>
<div id='container1'>
<div id='col1'>
Menu option 1<br />
Menu option 2<br />
Menu option 3<br />
Menu option 4<br />
...
</div>
<div id='col2'>
Content!<br />
Content!<br />
Content!<br />
Content!<br />
Content!
</div>
</div>
</div>
<div id='footer'>
This is the footer.
</div>
</div>
</body>
当然，这是 fiddle :http://jsfiddle.net/gVEpx/
编辑:为了完全清楚，页脚应该是: 1)如果内容小:在页面底部(无滚动条) 2) 如果内容大:在内容的底部，这样当你滚动到页面底部时，你只会看到页脚。
编辑 2: 没有很清楚地提到两列都应该一直跟到页脚。我想在其中一列上添加边框，并且该边框需要贯穿整个页面，从页眉到页脚。
编辑 3:这里有两张精美的图片以供说明:
和 
.
最佳答案
看看这个fiddle .
中间部分设置为min-height: 100%，然后我们使用padding: 100px 0; margin: -100px 0 给页眉和页脚留出位置。我们使用 box-sizing: border-box 来不改变页面的整体高度。我们还使用 padding-bottom: 9999px; margin-bottom: -9999px 将内容拉伸(stretch)到页脚，即使没有足够的内容。
如果你想使页眉和页脚垂直居中，你可以将 line-height 设置为等于 height。如果内容不止一行，那么你可以嵌套另一个 div 并使用 display: table-cell;垂直对齐:居中；:
HTML
<div id="header" class="vcenter">
<div>
Header
</div>
</div>
...
<div id="footer" class="vcenter">
<div>
Footer
</div>
</div>
CSS
.vcenter {
display: table;
}
.vcenter > * {
display: table-cell;
vertical-align: middle;
}
关于Css样式布局问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14162109/