3 列布局，中间列有页眉和页脚答案

【问题标题】：3 column layout with header and footer in center column3 列布局，中间列有页眉和页脚
【发布时间】：2014-01-13 22:14:42
【问题描述】：

我正在尝试使我的页面看起来像 Facebook Android 应用程序。该应用程序可以概括为具有 3 列布局，只有中心列具有标题（没有页脚，但在我的要求中我还需要一个页脚）。

如下图所示

红色和蓝色的 div 是左右侧边栏。绿色和紫色的 div 是中心 div。紫色 div 是页眉和页脚 div，将分别贴在页面的顶部和底部。

还有一个要求是标题（顶部紫色）上会有按钮来隐藏和显示左右侧边栏。最初只有中心 div 是可见的，其余的可以在需要时被调用。到目前为止，这是我的代码。（我无法获得中心 div 的宽度）

HTML 代码

<html>
<head>
<title>Sample</title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
<div id="main">
    <div id="leftBar" class="main">Left Bar</div>
    <div id="content" class="inner">
        <div id="header">Head</div>
        <div id="body">Body</div>
        <div id="footer">Footer</div>
    </div>
    <div id="rightBar" class="main">Right Bar</div>
</div>
</body>
</html>

CSS

body{
margin: 0px;
}

div.inner{
height: 500px;
width: 50%;
background: red;
}

div.main{
background: lime;
height: 200px;
overflow: hidden;
position: relative;
}

#leftBar{
float: left;
}

#content{
position: relative;
height: 100%;
float: left;
}

#rightBar{
float: right;
}

#header{
position: fixed;
top: 0px;
background: blue;
}

#body{
margin-top: 40px;
position: relative;
}

#footer{
position: absolute;
bottom: 0px;
}

我还在下面链接的小提琴中添加了 JavaScript 代码 http://jsfiddle.net/mv6Bj/1/

宽度应使中心 div 占屏幕的 100% 宽度，当右/左切换进入图片时，它们应到达其位置并将中心 div 分别推向左侧或右侧。这符合标准的 Facebook 应用功能。

这些是我现在遇到的问题

中心 div 不是 100%，也不会随着元素的出现和消失而缩放
中心 div 的高度不是 100%（它在 Chrome 上，但奇怪的是它不在 JSFiddle 上）
当我点击左侧时，leftBar 消失，内容 div 向左移动，但标题 div 保持原位。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

据我了解，我已经更新了小提琴。

Working Demo

我使用了display:table 属性。可以参考this或this

html, body {
    margin: 0px;
    min-height:100%;
    height:100%;
}

#main {
    min-height:100%;
    display:table;
    width:100%;
    height:100%;
}

#leftBar, #rightBar {
    background: lime;
    width:100px;
    display:table-cell;
}

#content {
    min-height: 100%;
    display:table-cell;
    background: red;
}

#header {
    background: blue;
    height:10%;
}
#body {
 min-height:80%;
    overflow:hidden;
}
#footer {
 background: magenta;
height:10%;
}

希望这对你有用。

【讨论】：

谢谢，正是我想要的。
现在刚测试，遇到一个问题，如果可以的话请告诉我。我希望标题填充内容 div 的宽度并固定在页面顶部。基本上，当我向下滚动时，标题 div 应该始终位于顶部。

【解决方案2】：

您可以查看这个小提琴，我对您的 css 进行了相应的更改。

body {
   margin: 0px;
}
div.inner {
   height: 500px;
   width: 50%;
   background: red;
}
div.main {
   background: lime;
   bottom:0px;
   top:0px;
   overflow: hidden;
   position: absolute;
   width:20%;

}
 #leftBar {
 float: left;
}
 #content {
 position: absolute;
 height: 100%;
  top:0px;
  right:0px;
 width:60%;
 left:20%;
 float:left;

 }
 #rightBar {
float: right;
width:20%;
 background: lime;
top:0px;
bottom:0px;
left:80%;
    position:absolute;
}
#header {
float: left;
position: fixed;
top: 0px;
margin-left: 0px;
background: blue;
left:20%;
right:20%;
}
#body {
margin-top: 40px;
position: relative;
}
#footer {
position: absolute;
bottom: 0px;
position: fixed;

margin-left: 0px;
background: blue;
left:20%;
right:20%;
}

http://jsfiddle.net/mv6Bj/3/

【讨论】：