Javascript 具有固定页眉和页脚、固定宽度侧边栏和灵活内容的布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10474354/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Layout with fixed header and footer, fixed width sidebar and flexible content
提问by mck
I'm trying set up a layout that will look like this:
我正在尝试设置一个如下所示的布局：
I want to use twitter bootstrap for the project, but I understand it may not be the best way to go for the basic layout that looks like this. I know how to setup the header and footer to be fixed at the top and bottom, but I have a hard time having my sidebar constant width and independently scrollable.
我想在项目中使用 twitter bootstrap，但我知道这可能不是实现看起来像这样的基本布局的最佳方式。我知道如何将页眉和页脚设置为固定在顶部和底部，但是我很难让我的侧边栏保持恒定宽度和独立滚动。
My current implementation is here: http://jsfiddle.net/Mwkrw/3/.
我目前的实现在这里：http: //jsfiddle.net/Mwkrw/3/。
I tried setting up the fixed sidebar using Fixed sidebar navigation in fluid twitter bootstrap 2.0and a couple of other similar answers on stack overflow, but they all break when the sidebar is longer than the content and as far as I know there is no way to give it an independent scroll.
我尝试在fluid twitter bootstrap 2.0中使用Fixed sidebar navigation和堆栈溢出的其他几个类似答案设置固定侧边栏，但是当侧边栏比内容长时它们都会中断，据我所知没有办法给它一个独立的卷轴。
I would ideally like to do this with pure css - no javascript. I'm sure it's possible and it's my lack of skill and knowledge that prevents me form doing it properly, so there may be no point in unnecessarily adding javascript code. (I'm still adding a javascript tag in case it's not possible)
理想情况下，我想用纯 css 来做到这一点 - 没有 javascript。我确信这是可能的，并且由于我缺乏技能和知识，我无法正确地完成它，因此不必要地添加 javascript 代码可能没有意义。（我仍在添加一个 javascript 标签，以防万一这是不可能的）
Thanks for all the help!
感谢所有的帮助！
EDIT: So my header clearly did not need to be position fixed. Here is the new and improved version: http://jsfiddle.net/Mwkrw/4/I'm still struggling with the two scrollable divs though.
编辑：所以我的标题显然不需要固定位置。这是新的和改进的版本：http: //jsfiddle.net/Mwkrw/4/ 不过我仍然在为两个可滚动的 div 苦苦挣扎。
采纳答案by st-boost
The magic is in box-sizing:border-box;. For compatibility with Firefox, chrome<10, and safari<5.1, add the -webkit- and -moz- prefixes. IE supports it as of 8.0.
魔法在box-sizing:border-box;。为了与 Firefox、chrome<10 和 safari<5.1 兼容，请添加 -webkit- 和 -moz- 前缀。IE 从 8.0 开始支持它。
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>very structured layout</title>
<style type='text/css'>
* {margin:0; padding:0;}
body {background:#fff; position:absolute; width:100%; height:100%;}
#main {background:#888; height:100%; padding:60px 0 40px; box-sizing:border-box;}
#head {background:#f8f; position:absolute; width:100%; height:60px;}
#left {background:#ff8; float:left; width:250px; height:100%; overflow:scroll;}
#right {background:#8f8; height:100%; overflow:scroll;}
#foot {background:#f88; position:absolute; bottom:0; width:100%; height:40px;}?
</style>
</head>
<body>
<div id='head'>header: width = 100%, height = 40px</div>
<div id='main'>
<div id='left'>left: width = 250px, height = 100%</div>
<div id='right'>right: width = 100% - 250px, height = 100%</div>
</div>
<div id='foot'>foot: width = 100%, height = 60px</div>?
</body>
</html>
edit: after Andres' solution made me realize I could achieve greater compatibility, I messed around a bit and came up with an alternate solution, which I think is more intuitive as well. It doesn't work in IE7, but it does work in IE8.
编辑：在安德烈斯的解决方案让我意识到我可以实现更大的兼容性之后，我搞砸了一点并想出了一个替代解决方案，我认为它也更直观。它在 IE7 中不起作用，但它在 IE8 中起作用。
The page is the same as the above, with the only change being that the CSS is replaced with this:
页面与上面相同，唯一的变化是CSS替换为：
* {margin:0; padding:0;}
body {background:#fff;}
#main {background:#888; position:absolute; top:40px; bottom:60px; width:100%;}
#head {background:#f8f; position:absolute; width:100%; height:40px;}
#left {background:#ff8; position:absolute; width:250px; height:100%; overflow:scroll;}
#right {background:#8f8; margin-left:250px; height:100%; overflow:scroll;}
#foot {background:#f88; position:absolute; bottom:0; width:100%; height:60px;}
Note that, for both versions, #headand #footneed to have an overflowproperty other than visibleif their content would otherwise extend off the page.
需要注意的是，对于两个版本，#head并且#foot需要有一个overflow比其他财产visible，如果他们的内容，否则会延长关闭页面。
回答by Andres Ilich
I managed to get the layout you mocked up in your post by first creating a main container class that is stretched 100% both vertically and horizontally, this way we can fully stretch the content within to the full height of your viewport. Within this container div i created another container and positioned it absolutely while stretching it in all directions, top, left, bottom, right, i felt that this method was cleaner cause this way i can easily position the header and footer without the need for negative margins (tried it like that but it didn't work).
我设法通过首先创建一个垂直和水平拉伸 100% 的主容器类来获得您在帖子中模拟的布局，这样我们就可以将内容完全拉伸到视口的整个高度。在这个容器 div 中，我创建了另一个容器，并在向各个方向拉伸它的同时绝对定位它top, left, bottom, right，我觉得这种方法更干净，因为这样我可以轻松定位页眉和页脚，而无需负边距（尝试过这样但它没有用）。
Here is a demo of the layout: http://jsfiddle.net/andresilich/gbzTN/1/show, edit here.
这是布局的演示：http: //jsfiddle.net/andresilich/gbzTN/1/show，在此处编辑。
And the code:
和代码：
CSS
CSS
html, body {
height: 100%;
}
.main {
*zoom:1;
}
.main, .row-fluid {
height: 100%;
}
.main:before, .main:after,
.column:before, .column:after {
content: "";
display: table;
}
.main:after,
.column:after {
clear: both;
}
.column {
height: 100%;
overflow: auto;
*zoom:1;
}
.column .padding {
padding: 20px;
}
.box {
bottom: 40px;
left: 0;
position: absolute;
right: 0;
top: 40px;
}
.span9.full {
width: 100%;
}
.footer {
height: 40px;
width: 100%;
z-index: 100;
background-color: red;
bottom: 0;
left:0;
right:0;
position: fixed;
}
HTML
HTML
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> Username
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li class="divider"></li>
<li><a href="#">Sign Out</a></li>
</ul>
</div>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="main clearfix">
<div class="box">
<div class="row-fluid">
<div class="column span3">
<div class="padding">
.. content ..
</div>
</div>
<div class="column span9">
<div class="padding">
<div class="full span9">
.. content ..
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer clearfix">
<h3>footer</h3>
</div>
Edit: noticed that this solution does not work as expected in IE7 (works perfect in IE8 and above) so here is a conditional comment targeting everything below IE8 that should fix the issue and make it work as expected:
编辑：注意到此解决方案在 IE7 中无法按预期工作（在 IE8 及更高版本中完美运行），因此这里有一个条件注释，针对 IE8 下的所有内容，应该可以解决问题并使其按预期工作：
CSS
CSS
<!--[if lt IE 8]>
<style type="text/css">
html {
margin: 40px 0px;
overflow: hidden
}
.main {
zoom:1;
}
.column {
overflow-x: hidden !important;
overflow-y: scroll !important;
zoom: 1;
}
.box {
position: relative !important;
min-height: 100%;
height:100%;
zoom: 1;
top:0 !important;
}
.main {
margin: 40px 0px;
}
</style>
<![endif]-->
回答by Zim
Now that Bootstrap 4is out I thought some may benefit from this layout which is now a little easier thanks to flexbox.
现在Bootstrap 4出来了，我认为有些人可能会从这种布局中受益，由于 flexbox 现在变得更容易了。
<body class="container-fluid d-flex flex-column h-100 align-items-center px-0">
<div class="row grow w-100">
<div class="header col-12 bg-primary py-2">
Header
</div>
<div class="side col-3 bg-light py-3 pl-0">
Menu
</div>
<div class="main col bg-warning py-3">
Main
</div>
</div>
<div class="row w-100 footer bg-danger">
<div class="col-12 py-3">
Footer
</div>
</div>
</body>
.grow {
flex: 1;
overflow: hidden;
}
.main,.side {
overflow-y: auto;
height:calc(100% - 55px);
}
.footer,.header {
height: 55px;
}
