我正在尝试制作一个带有固定标题和可滚动内容区域的网页.当标题具有已知高度时,这是微不足道的,但是当标题流畅时,我正在努力寻找解决方案.
我想要的布局是:
--------------
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>
Sha*_*una 24
假设你的意思是"固定" position:fixed,我认为在纯CSS中不可能position:fixed将元素从文档流中取出.
但是,它应该只需要一两行JavaScript来获得你想要的东西.像这样的东西(未经测试,仅用于示例目的,将需要语法调整实际工作):
var height = document.getElementById("head").offsetHeight;
document.getElementById("content").style.marginTop = height + 'px';
这样的东西应该可以获得固定的渲染高度,<div>并相应地设置内容<div>的边距.您还需要在固定上明确设置背景颜色<div>,否则滚动时内容将显示为固定的内容.
Eri*_*ric 21
这是一个解决方案,但这是一个骗局.基本上,你有一个重复的标题元素,在固定位置下按下内容:
<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>
我把接受和Eric的答案结合起来.空div用于推动"head"下面的内容.当触发window.onresize时,此div的宽度由jQuery设置:
function resizeHeader() {
$(".header-push").height($(".header").height());
}
$(document).ready(resizeHeader);
$(window).resize(resizeHeader);
有关详细信息,请参阅此jsFiddle.
最简单的方法就是简单地替换position: fixed;为position: sticky;
header {
position: sticky;
top:0;
background-color: red;
color: #fff;
}
main {
background-color: green;
color: #fff;
min-height: 150vh;
}
演示： https: //jsfiddle.net/4zndve6p/