3 列布局，中间列有页眉和页脚
Posted
技术标签:
【中文标题】3 列布局，中间列有页眉和页脚【英文标题】：3 column layout with header and footer in center column 【发布时间】：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 保持原位。
【问题讨论】：
【参考方案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/
【讨论】：
以上是关于3 列布局，中间列有页眉和页脚的主要内容，如果未能解决你的问题，请参考以下文章
3 列全高 CSS 布局，带有用于 Web 应用程序的页眉和页脚
react.js - 处理固定页眉和页脚的 React-router