如何在两个固定属性之间调整 DIV 的大小答案

【问题标题】：How to size a DIV between two fixed attributes如何在两个固定属性之间调整 DIV 的大小
【发布时间】：2017-08-22 03:23:27
【问题描述】：

快速提问。

我正在处理的网站上有两个导航栏。第一个是在页面顶部运行屏幕宽度的固定高度条，第二个是在页面底部运行屏幕宽度的固定高度条。

有没有办法让它们之间的内容 DIV 根据剩余空间的百分比而不是总页面大小的百分比调整大小？由于窗口垂直缩小，我希望中间的内容 div 相应地调整大小，而两个栏保持相同的大小。

任何帮助将不胜感激！

【问题讨论】：

标签： javascript html css

【解决方案1】：

这里有两种最常用的方法来做到这一点：

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>

【讨论】：

太棒了，谢谢！ calc() 函数是新事物吗？我只是偶尔这样做，我仍然是一个业余爱好者，但我以前从未遇到过。
自 2011 年左右（IE9）以来，它已在主要浏览器中得到支持。很高兴为您提供帮助！

【解决方案2】：

第一个导航高度 = 80 像素，第二个导航高度 = 90 像素；总计 170 像素；中间 div class= 中间 div

.middle-div{
    height: calc(100vh - 170px);
}

示例：

.nav-top, .nav-bottom{
  position: fixed;
  height: 55px;
  width: 100%;
  background: #999;
}
.nav-top{
  top: 0;
}
.nav-bottom{
  bottom: 0;
}
.nav-top ul li{
  display: inline;
}
.nav-bottom ul li{
  display: inline;
}
.middle-content{
  background: #555;
  height: calc(100vh - 100px);
  width: 100%;
}

<nav class="nav-top">
<ul>
<li><button>N M One</button></li>
<li><button>N M Two</button></li>
</ul>
<nav>

<div class="middle-content">

<div>

<nav class="nav-bottom">
<ul>
<li><button>N M One</button></li>
<li><button>N M Two</button></li>
</ul>
<nav>

【讨论】：