我正在尝试制作一个带有固定标题和可滚动内容区域的网页.当标题具有已知高度时,这是微不足道的,但是当标题流畅时,我正在努力寻找解决方案.
我想要的布局是:
--------------
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/> …css ×1