我试图做一个固定标题和可滚动内容区域的网页。这是微不足道的,当标题具有已知的高度,但我正在努力找到一个解决方案,当标题是流动的。
我想要的布局是:
-------------- head -------------- content --------------
其中“head”是其内容需要的高度,“content”没有最小高度,但在可滚动之前将达到视口底部的最大高度。
这是可能的这些天在纯CSS吗?我的目标是IE8。
为了澄清我想要的,here is what I would do if I knew the height of the header:
<!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>
解决方法
假设“固定”你的意思是位置:固定,我不认为它可能在纯CSS,因为position:fixed从文档流中取出元素。
但是,它应该只需要一两行JavaScript来得到你想要的。这样的东西(未经测试,仅为了示例的目的,将需要语法调整实际工作):
var height = document.getElementById("head").offsetHeight; document.getElementById("content").style.marginTop = height + 'px';
这样的东西应该会让你渲染的固定< div>并相应地设置内容< div>的margin。您还需要在固定的< div>上显式设置背景颜色,否则滚动时内容会显示为固定的。