我正在尝试有一个布局，其中左列是固定宽度和 100% 高度，右列是 100% 宽度和高度。我还希望页脚粘在底部。
我遇到的问题是，由于列是标题下方浏览器视图高度的 100%，因此它们在横幅和页脚div 后面运行。我希望他们停在横幅上。是设计这些div来实现这一点的最佳方式吗？
任何帮助，如果这个问题是在其他地方问的，我很抱歉，我找不到我面临的相同问题。
CSS 和 HTML 如下：
@charset "UTF-8";
/* CSS Document */
html, body
{
width: 100%;
height: 100%;
overflow: hidden;
}
body
{
margin: 0;
}
/*----- HEADER -----*/
#header
{
width: 100%;
height: 50px;
background: linear-gradient(to bottom, #BBBBBB 0%, #CCCCCC 100%) repeat scroll 0 0 #455774;
border-bottom: 1px solid #666666;
box-shadow: 0 2px 2px #666666;
}
/*----- END HEADER -----*/
/*----- SEARCH -----*/
#searchBox
{
width: 100%;
height: 50px;
background: #EEEEEE;
border-top: 1px solid #FFFFFF;
}
/*----- END SEARCH -----*/
/*----- APP SECTION -----*/
#appView
{
width: 100%;
background: white;
}
#leftPane, #rightPane
{
height: 100%;
position: absolute;
}
#leftPane
{
float: left;
width: 270px;
background: #FFFFFF;
border-right: 20px solid #EEEEEE;
}
#leftPaneNav
{
background-color: #666666;
float: left;
height: 100%;
width: 50px;
}
#sidebar
{
float: left;
height: 100%;
left: 50px;
margin: 0;
padding: 0;
position: absolute;
right: 0;
background: #red;
box-shadow: 0px -5px 5px 0px rgb(136, 136, 136) inset;
}
#rightPane
{
width: 100%;
left: 290px;
background: #FFFFFF;
box-shadow: 2px 2px 5px 2px rgb(136, 136, 136) inset;
}
/*----- END APP SECTION -----*/
/*----- BANNER DIV -----*/
#banner
{
position: absolute;
bottom: 50px;
width: 100%;
height: 50px;
background: red;
}
/*----- FOOTER -----*/
#footer
{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: black;
}
HTML
<body>
<div id="header">
</div>
<div id="searchBox">
</div>
<div id="appView">
<div id="leftPane">
<div id="leftPaneNav">
</div>
<div id="sidebar">
</div>
</div>
<div id="rightPane">
</div>
</div>
<div id="banner">
</div>
<div id="footer">
</div>
</body>
</html>
解决问题的最简单方法是向 100% 高度div 添加与页脚高度匹配的 padding-bottom，这样底部的内容就不会被页脚覆盖
不要绝对定位列和页脚，而是让它们静态显示（默认定位）。这样他们就会互相对抗。然后使用 CSS 获取粘性页脚。一个很好的例子可以在这里找到：Ryan Fait的粘性页脚页面。最后，使用 JQuery 使列等于内容区域的高度：请参阅此站点。