CSS DIV导航和页脚正文

我花了无数个小时试图修复我的CSS/Divs并在网上搜索了很多帮助和教程。不幸的是，我已经放弃了在我的代码中进行这项工作。CSS DIV导航和页脚正文

我已经拥有的是一个布局，其下方有一个标题，标题栏，后面跟着一个左侧导航窗格和右侧的页面主体。此外，页面末尾有一个页脚，我总是触摸窗口的底部，同时让导航窗格和body div伸展到底部。

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

enter image description here

请帮助！

谢谢。

代码：

<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; 
}

来源

2014-06-24 theflarenet

这篇文章有什么您寻找[“粘脚”]（http://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-page-correctly） – jcjunction

我已经尝试将相同的代码应用于我的应用程序，但它不适用于身体旁边的左侧导航面板。我真的不明白为什么。 :-( – theflarenet

你有一个内容的包装（一个绕过你的左侧导航栏和“主”div）？我认为如果你不这样可能能够得到其他代码工作 – jcjunction

看起来像你想是这样的：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%; 
}

在列的情况下，高度增加他们的父容器。

来源

2014-06-24 22:39:41 Kaceykaso

这是非常好的但我怎样才能让“sideNav”和“main”两者都以背景颜色与边框线一起向下展开到页脚？看看：http://jsfiddle.net/Rx276/ – theflarenet

更多类似这样的内容？http ：//jsfiddle.net/Rx276/25/看到我上面的编辑 – Kaceykaso

你应该知道，这个解决方案只有IE11 + http：// caniuse。com /＃feat = flexbox –

CSS DIV导航和页脚正文

回答

相关问题