时间戳

首页 > 解决方案 > 设置 div 以填充页面并使其在附加时也保持该高度

html - 设置 div 以填充页面并使其在附加时也保持该高度

问题描述

我有 3 行，其中的中间附加了数据，因此它的高度增加了。如何使中间 div 填充页面高度的其余部分，然后在向其中添加更多数据时保持该大小？

这是中间元素的相关 CSS：

#scroll {
    overflow: auto
    height: ?
}

这是布局的代码笔- 我现在已经固定了中间 div 的高度以使滚动正常工作，但是如果我使用 flexbox 使其填充高度，它只会在添加内容时扩展，从而使整个页面更高.

E：页眉和页脚不能有固定的高度，因为它们里面有动态设置的文字

标签： htmlcss

解决方案

使用视口高度 (vh) 单位将页眉、#scroll 和页脚设置为所需的高度，加起来为 100（100vh === 视口高度的 100%）。

function addLine() {
  document.getElementById('scroll').innerHTML += '<p>new line</p>';
}
* {
  padding: 0;
  margin: 0;
}
.header, .footer {
  background: red;
  height:15vh;
}

#scroll {
  background: green;
  text-align: center;
  height: 70vh;
  overflow: auto;
}
<div class="header">
  <h1>header</h1>
</div>
<div id="scroll">
  <p>line</p>
  <p>line</p>
</div>
<div class="footer">
  <div class="add-line" onClick="addLine()">click to add line</div>
</div>

推荐阅读