布局具有固定的页眉和页脚，固定宽度边栏和灵活的内容 [英] Layout with fixed header and footer, fixed width sidebar and flexible content
问题描述
我正在尝试设置一个布局，如下所示：
I'm trying set up a layout that will look like this:
我想对项目使用twitter bootstrap，但是我知道它可能不是最好的方式来看看这样的基本布局。我知道如何设置页眉和页脚固定在顶部和底部，但我很难有我的侧边栏恒定宽度和可独立滚动。
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.
我的当前实施在这里： http://jsfiddle.net/Mwkrw/3/ 。
My current implementation is here: http://jsfiddle.net/Mwkrw/3/.
我尝试使用固定侧边栏导航在流体twitter bootstrap 2.0 和一些其他类似的答案在堆栈溢出，但他们都打破了当侧边栏比内容更长，据我所知没有办法给它一个独立的滚动。
I tried setting up the fixed sidebar using Fixed sidebar navigation in fluid twitter bootstrap 2.0 and 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.
我理想地希望这样做与纯CSS - 没有javascript。我相信这是可能的，这是我缺乏技能和知识，阻止我做正确的，所以可能没有意义，不必要地添加JavaScript代码。 （我仍然在添加一个javascript标记，以防万一不可能）
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)
感谢所有的帮助！
编辑：所以我的标题明确地不需要位置固定。这是新的和改进的版本： http://jsfiddle.net/Mwkrw/4/ 我'
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.
推荐答案
魔法在 box-sizing：border -box; 。为了与Firefox，chrome< 10和safari< 5.1的兼容性，添加-webkit和-moz-前缀。 IE支持从8.0开始。
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.
<!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>
编辑：Andres的解决方案让我意识到我可以实现更大的兼容性，并提出了一个替代解决方案，我认为也更直观。它在IE7中不工作，但它在IE8中工作。
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.
页面与上面相同，唯一的变化是CSS被替换为this：
The page is the same as the above, with the only change being that the CSS is replaced with this:
* {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;}
请注意，对于这两个版本， #head code> #foot 需要有溢出属性而不是可见 if否则其内容将延伸到页面之外。
Note that, for both versions, #head and #foot need to have an overflow property other than visible if their content would otherwise extend off the page.
这篇关于布局具有固定的页眉和页脚，固定宽度边栏和灵活的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
