我如何使用CSS来定位固定可变高度标题和可滚动内容框？
我正在尝试制作一个带有固定标题和可滚动内容区域的网页。 当头部有一个已知的高度时，这是微不足道的，但是我正努力寻找头部是否stream畅的解决scheme。
我想要的布局是：
-------------- head -------------- content -------------- 其中“head”是内容所需要的任何高度，“content”没有最小高度，但在可滚动之前将达到视口底部的最大高度。
这是纯粹的CSS这可能吗？ 我针对的是IE8 +。
为了澄清我想要的东西， 如果我知道标题的高度，我会这样做 ：
<!DOCTYPE html> <html> <head> <style type="text/css"> body { margin: 0; } #head { background: yellow; height: 20px; /* I can't rely on knowing this. */ } #content { background: red; position: absolute; top: 20px; /* here also */ bottom: 0; width: 100%; overflow: auto; } </style> </head> <body> <div id="head">some variable height content</div> <div id="content"> scrollable content<br/> scrollable content<br/> scrollable content<br/> scrollable content<br/> scrollable content<br/> scrollable content<br/> scrollable content<br/> scrollable content<br/> scrollable content<br/> scrollable content<br/> scrollable content<br/> scrollable content<br/> scrollable content<br/> scrollable content<br/> scrollable content<br/> </div> </body> </html>
假设通过“固定”您的意思是position:fixed ，我不认为这是可能的纯CSS，作为position:fixed从文档stream中取出元素。
但是，它应该只需要一两行JavaScript来获得你想要的。 像这样的东西（未经testing，仅用于示例目的，将需要修改实际工作的语法）：
var height = document.getElementById("head").offsetHeight; document.getElementById("content").style.marginTop = height + 'px';
类似的东西应该让你获得固定的<div>的渲染高度，并相应地设置内容<div>的边距。 您还需要在固定的<div>上显式设置背景颜色，否则当滚动时，内容将显示为stream入固定的颜色。
这是一个解决scheme，但它是一个骗子。 基本上，你有一个重复的头部元素，下推的内容，在固定的位置之一：
<div class="outer"> <div class="header">Header content goes here</div> <div class="header-push">Header content goes here</div> <div class="content"> ... </div> </div>
我做了接受和埃里克的答案的组合。 一个空的div用来推动下面的内容“头”。 当window.onresize被触发时，这个div的宽度由jQuery设置：
function resizeHeader() { $(".header-push").height($(".header").height()); } $(document).ready(resizeHeader); $(window).resize(resizeHeader);
看到这个jsFiddle的更多信息。
这个JavaScript将采取固定标题的variables高度，并设置内容的顶部边界在下面stream动。 只需调用页面加载。
<script type="text/javascript"> function AdjustHeight() { var height = document.getElementById("fixedheader").offsetHeight; document.getElementById("content").style.marginTop = height + 'px'; } </script>
以上是Shauna的解决scheme的完整代码示例，上面为懒/困惑的/谁不能得到这个工作的人。
<html> <head> <style> #FreezePaneHeader { position: fixed; top:0; left: 0; width: 100%;background-color: gray; } #FreezePaneBody { margin-top: 30px; } </style> <script type="text/javascript"> function resizeFreezePane() { var height = document.getElementById("FreezePaneHeader").offsetHeight; document.getElementById("FreezePaneBody").style.marginTop = height + 'px'; } //Resizes content to allow static header with dynamic height on postbacks function pageLoad() { resizeFreezePane(); } var addEvent = function (elem, type, eventHandle) { if (elem == null || typeof (elem) == 'undefined') return; if (elem.addEventListener) { elem.addEventListener(type, eventHandle, false); } else if (elem.attachEvent) { elem.attachEvent("on" + type, eventHandle); } else { elem["on" + type] = eventHandle; } }; //also when page is resized. addEvent(window, "resize", resizeFreezePane); function GenerateLorem(ele){ var x = document.getElementById(ele); x.innerHTML = x.innerHTML + "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium euismod leoquis convallis. In ornare suscipit massa eu commodo. Pellentesque vel nibh volutpat, commodo libero et, porta tellus. Duis eu fringilla arcu. Etiam imperdiet lectus diam, dignissim viverra dui hendrerit id. Fusce condimentum bibendum tincidunt. Aenean fringilla felis elit, et dapibus ante tempus at. Phasellus quis dolor odio.</p>"; resizeFreezePane(); } </script> </head> <body> <div id="FreezePaneHeader">Frozen Page Header</div> <div id="FreezePaneBody"> <button id="ButtonAddText" onclick="GenerateLorem('FreezePaneHeader'); return false;">Add more header text</button> <button id="ButtonAddText" onclick="GenerateLorem('FreezePaneBody'); return false;">Add more body text</button> <p id="PageContents"></p> </div> </body> </html>
