我发现另一篇帖子让我非常接近我正在寻找的东西，但并非一直如此。 （http://stackoverflow.com/questions/10474354/layout-with-fixed-header-and-footer-fixed-width-sidebar-and-flexible-content）
基本上我想为每个可滚动区域添加标题/标题部分。这些不应该在各自的部分内滚动。这是jsfiddle，我已经注释掉了标题部分。当它们被添加时，它将div推到窗口的高度之外，扩展内容。任何帮助表示赞赏！
这是原始代码：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Application Wireframe</title>
<style type="text/css">
body {
margin: 0;
height: 100%;
}
#header {
text-align: left;
background: #4f0f00;
color: #fff;
width: 100%;
margin: 0 0 0 0;
border: 0;
overflow: hidden;
position: fixed;
}
#accountbar {
background-color: #000000;
color: white;
height: 40px;
width: 100%;
}
#contextbar {
position:fixed;
top:40px;
width: 100%;
}
#leftheader {
background-color: #66CCFF;
height: 40px;
width:200px;
float:left;
}
#contentheader {
background-color: #996600;
color: white;
height: 40px;
}
#middle {
position:fixed;
top:80px;
width: 100%;
height: 100%;
}
#left_col {
float: left;
width: 200px;
/*height: 100%;*/
}
#left_col_wrap {
/*width: 100%;
height: 100%;
position: fixed;*/
}
#leftnav {
background-color: #66FFFF;
height: 100%;
overflow: scroll;
/*width: 200px;*/
}
#main_col {
/*margin-left: 200px;*/
/*height: 100%;*/
}
#main_content_wrap {
/*position:fixed;
width:100%;
height: 100%;*/
}
#messagegap {
background-color: white;
}
#contentpane {
background-color: #FFAA00;
height: 100%;
overflow: scroll;
}
#contentfoot {
background-color: #C80;
height: 20px;
position: fixed;
width: 100%;
bottom: 0;
padding-bottom: 18px;
}
#footer {
background-color: #CCCCCC;
clear: left;
width: 100%;
position: fixed;
bottom: 0;
}
</style>
</head>
<body>
<div id="header">
<div id="accountbar"><b>Account Bar</b> -always visible-this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</div>
</div>
<div id="contextbar">
<div id="leftheader"><b>Left Header</b></br>-usually says "Contents"-</div>
<div id="contentheader"><b>Content Header</b> -always visible- this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</div>
</div>
<div id="middle">
<div id="left_col">
<div id="left_col_wrap">
<div id="leftnav"><b>Left Navigation</b>
<ul>
<p>
First</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
Last</p>
</ul>
</div>
</div>
</div>
<div id="main_col">
<div id="main_content_wrap">
<div id="contentpane"><b>Content Pane</b>
<p>Content Pane</b> -always visible- this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</p>
<ul>
<p>
First</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
Last</p>
</ul>
</div>
</div>
</div>
</div>
<div id="footer"><b>Footer</b> -always visible, always at bottom of window-</div>
</body>
</html>
以下是解决方案：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Application Wireframe</title>
<style type="text/css">
body {
margin: 0;
height: 100%;
}
#header {
text-align: left;
background: #4f0f00;
color: #fff;
width: 100%;
margin: 0 0 0 0;
border: 0;
overflow: hidden;
position: fixed;
}
#accountbar {
background-color: #000000;
color: white;
height: 40px;
width: 100%;
}
#contextbar {
position:fixed;
top:40px;
width: 100%;
}
#leftheader {
background-color: #66CCFF;
height: 40px;
width:200px;
float:left;
}
#contentheader {
background-color: #996600;
color: white;
height: 40px;
}
#middle {
position:absolute;
top:80px;
width: 100%;
overflow-y: visible;
bottom: 8px;
/*height: 100%;*/
}
#left_col {
float: left;
width: 200px;
/*height: 100%;*/
}
#left_col_wrap {
/*width: 100%;
height: 100%;
position: fixed;*/
}
#leftnav {
background-color: #66FFFF;
height: 100%;
overflow: scroll;
/*width: 200px;*/
}
#main_col {
/*margin-left: 200px;*/
/*height: 100%;*/
}
#main_content_wrap {
/*position:fixed;
width:100%;
height: 100%;*/
}
#messagegap {
background-color: white;
}
#contentpane {
background-color: #FFAA00;
height: 100%;
overflow: scroll;
}
#contentfoot {
background-color: #C80;
height: 20px;
position: fixed;
width: 100%;
bottom: 0;
padding-bottom: 18px;
}
#footer {
background-color: #CCCCCC;
clear: left;
width: 100%;
position: fixed;
bottom: 0;
}
</style>
</head>
<body>
<div id="header">
<div id="accountbar"><b>Account Bar</b> -always visible-this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</div>
</div>
<div id="contextbar">
<div id="leftheader"><b>Left Header</b></br>-usually says "Contents"-</div>
<div id="contentheader"><b>Content Header</b> -always visible- this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</div>
</div>
<div id="middle">
<div id="left_col">
<div id="left_col_wrap">
<div id="leftnav"><b>Left Navigation</b>
<ul>
<p>
First</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
Last</p>
</ul>
</div>
</div>
</div>
<div id="main_col">
<div id="main_content_wrap">
<div id="contentpane"><b>Content Pane</b>
<p>Content Pane</b> -always visible- this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</p>
<ul>
<p>
First</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
left</p>
<p>
Last</p>
</ul>
</div>
</div>
</div>
</div>
<div id="footer"><b>Footer</b> -always visible, always at bottom of window-</div>
</body>
</html>
答案 0 :(得分：1)
为此你需要使用position: fixed;我认为你正在寻找这个。
HTML:
<div id="header"> Header Content </div>
<div id="wrapper">
<div id="leftheader"> Left Header </div>
<div id="leftwrapper">
---CONTENT HERE---
</div>
<div id="rightheader"> Right Header </div>
<div id="rightwrapper">
---CONTENT HERE---
</div>
</div>
<div id="footer"> Footer Content </div>
CSS:
<style type="text/css">
div#header
{position: fixed;left: 0px;top: 0px;height:100px;width:100%;background: black;color: White; }
div#leftheader
{position: fixed;left: 0px;top: 100px; height: 50px;width: 30%;float: left; background: red; color: White; }
div#leftwrapper
{position: fixed;left: 0px;color: Maroon;margin-top: 150px;margin-left: 0;margin-bottom: 100px; width: 30%; min-width: 30%; height: 600px; max-height: 600px; overflow-y: auto; }
div#rightheader
{position: fixed;left: 0px;top: 100px; height: 50px;width: 70%;margin-left: 30%;float: right;background: green;color: White;}
div#rightwrapper
{position: fixed;left: 0px;color: Purple;margin-left: 30%;margin-top: 150px;margin-bottom: 100px;width: 70%; min-width: 70%;height: 500px;max-height: 500px;overflow-y: auto; }
/*div#wrapper
{ height: 1000px; }*/
div#footer
{position: fixed;left: 0px;bottom: 0px; height: 100px;width: 100%;background: black;color: White;}
</style>
注意：我只在 Firefox 中进行了测试。
希望，它会帮助你。谢谢并继续发布。
干杯。 !!
答案 1 :(得分：1)
所以我认为你想要的是在每个可滚动的div中都有固定的标题？在视觉上，这与位于div顶部的固定标题相同。只要页面本身不滚动，此解决方案就可以正常工作。
您可以使用position: fixed;来实现此效果。其余我认为你可以做到。