全部,
我有一个页面应该只占用浏览器中的可用屏幕空间。
我有一个“顶栏”和一个“底栏”,它们都固定位于页面的顶部和底部。我想要一个 div 来消耗(占用)上面提到的两个条之间的剩余空间。
中间的 div 不与顶部和底部栏重叠是至关重要的。这可以用 CSS 实现吗?还是我需要使用 js?
另外,如果我确实使用js,考虑到浏览器在js代码之前先加载CSS,上面使用js进行居中定位是如何实现的?
非常感谢,
您可以使用
relative
和 absolute
位置。这是一个例子:
css
html,body,#wrapper {
height:100%;
margin:0;
padding:0;
}
#wrapper {
position:relative;
}
#top, #middle, #bottom {
position:absolute;
}
#top {
height:50px;
width:100%;
background:grey;
}
#middle {
top:50px;
bottom:50px;
width:100%;
background:black;
}
#bottom {
bottom:0;
height:50px;
width:100%;
background:grey;
}
html
<div id="wrapper">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
在
body
标签上使用绝对定位。顶部和底部为零的 position:absolute
会将主体“拉伸”到与浏览器窗口的大小相同。或者,设置 height: 100%
也可以,但我记得它对于某些旧浏览器来说效果很奇怪。
然后在中心 div 上使用绝对定位,并具有足够的顶部/底部偏移量以避免页眉和页脚栏。标题栏使用
top
绝对定位,fotter 使用 bottom
绝对定位。
注意:这不适用于移动浏览器。您需要使用 JS 获取窗口的高度并手动设置中心 div 的高度。
Sotiris 的精彩回答(https://stackoverflow.com/a/5776719/1925112)。
将“overflow:auto”添加到中间,在调整窗口大小时它会表现得更加完美。