Question

快速提问。

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

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

非常感谢任何帮助！

Answer 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>

Answer 2

第一个导航高度= 80px，第二个导航高度= 90px;总计170px; middle div class = middle-div

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

示例：

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: