快速提问。
我正在工作的网站上有两个导航栏。第一个是固定高度栏，在页面顶部沿屏幕的宽度延伸，第二个是固定高度栏，在页面底部沿屏幕的宽度延伸。
有没有办法使它们之间的内容DIV根据剩余空间的百分比而不是总页面大小的百分比来调整大小？当窗口垂直缩小时，我希望中间的内容div相应地调整大小，而两个条形保持相同大小。
任何帮助将非常感激！
这是执行此操作的两种最常用的方法：
1.通过使用减去页眉+页脚高度，计算内容的大小 calc
html,
body {
height: 100%;
}
.bar {
background: #ccc;
height: 50px;
}
.content {
background: #aaa;
height: calc(100% - 100px);
}<div class="bar">Header</div>
<div class="content">Content</div>
<div class="bar">Footer</div>2.使用vh（视口高度）单位来计算布局100vh
.bar {
background: #ccc;
height: 10vh;
}
.content {
background: #aaa;
height: 80vh;
}<div class="bar">Header</div>
<div class="content">Content</div>
<div class="bar">Footer</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句