CSS DIV导航＆amp;从页到页脚

Question

我花了无数个小时试图修复我的CSS / Divs并在网上搜索了很多帮助和教程。不幸的是，我已经放弃了我的代码中的这一进展。

我已经拥有的是一个带有标题，标题栏位于其下方的布局，后面是左侧导航窗格，右侧是页面正文。此外，在页面的末尾有一个页脚，我想要始终触摸窗口的底部，并让导航窗格和主体div都伸展到它。

我有点工作......虽然它没有完全达到页面的底部。看看......我不确定我做错了什么！

请帮助!!!

谢谢。

代码：

<div id="wrapper1">
  <div id="header1">
    <p><strong>sdfsdfsdf</strong></p>
  </div>
  <header id="navigation1" align="center">
    header bar here
  </header>
  <div id="contentliquid1">
    <div id="content11">body of the page here</div>
  </div>
  <div id="leftcolumn1" valign="top">navigation pane here</div>
  <div id="footer1" align="center" style="display: table;">
    <div style="display: table-cell; vertical-align: middle;">asdasdasd</div>
  </div>    
</div>

CSS：

body,html {
  background-color: #D5DAE0;
  background-image: url();
  background-repeat:no-repeat;
  background-attachment:scroll;
  background-position:top;
  margin: 0px;
  padding: 0px;
  height:100%;
} 
div {
  border-width: 1px;
  border-spacing: 1px;
  border-style: solid;
  border-color: #999999;
  border-collapse: collapse;
  border-left: 0px;   
  border-right: 0px;  
}
#wrapper1 {
    width: 100%;
    min-width: 962px;
    max-width: 962px;
    margin: auto;
    height: 100%;
    margin-bottom: -30px;
    position: relative;
}
#header1 {
    float: left;
    height: 75px;
    width: 100%;      
    border: 0px;
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
}
#navigation1 {
    float: left;
    height: 32px;
    width: 100%;
    border: 0px;
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
}
#contentliquid1 {
    float: left;
    width: 100%;
    height: 100%;
    margin-bottom: -30px;
    position: relative;
    border-left: 1px solid #999999; 
    border-right: 1px solid #999999;   
}
#content11 {
    margin-left: 260px;
    height: 100%;
    border: 0px;
}

#leftcolumn1 {
    float: left;
    width: 241px;
    margin-left: -100%;
    border-left: 0px;
    border-right: 1px solid; 
    border-color: #999999;
    min-height: 100%;
    margin-bottom: -1px;
    position: relative;
}
#footer1 {
    height: 30px;
    width: 100%;
    clear: both;
    border: 0px;
    border-left: 1px solid; 
    border-top: 1px solid; 
    border-color: #999999;
    position: relative;
}

Answer 1

看起来你想要这样的东西：http://jsfiddle.net/zuGLH/29/ ??

强制页脚停留在窗口底部（不是内容的结尾）：

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
}

然后我展开了两个中间列来填充：

.body {
  clear: both;
  display:flex;
  flex-direction: row;
  align-items: stretch;
}

编辑并确保列填充可用高度，首先确保页面确实如此：

html, body {
  height: 100%;
}

然后添加到应填写的其他内容中：

.body {
  height: 100%;
}

如果是列，请将高度添加到其父容器中。