Question

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

这是中间元素的相关CSS：

closure

Here's a codepen of the layout - 我现在已经修复了中间div的高度以使滚动工作，但如果我使用flexbox使其填充高度，它只会在内容附加到它时扩展，从而使整个页面更高。

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

Answer 1

使用最多为100的视口高度（vh）单位将标题#scroll和footer设置为所需的高度（100vh === 100％的视口高度）。

＆＃13;

function addLine() {
  document.getElementById('scroll').innerHTML += '<p>new line</p>';
}

＆＃13;

* {
  padding: 0;
  margin: 0;
}
.header, .footer {
  background: red;
  height:15vh;
}

#scroll {
  background: green;
  text-align: center;
  height: 70vh;
  overflow: auto;
}

＆＃13;

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

＆＃13;

Answer 2

玩了一段时间之后，我觉得它有点超出了它的能力，所以因为我使用javascript无论如何我编写了一个快速函数来计算其他元素的高度并相应地设置中间元素：

MSIEXEC /I {Path To MSI} TRANSFORMS={Path the response MST} /qn

function addLine(height) {
  document.getElementById('scroll').innerHTML += '<p>line</p>';
}

function setHeight() {
  header = document.getElementById('header');
  footer = document.getElementById('footer');
  excess_height = header.clientHeight + footer.clientHeight;
  height = window.innerHeight - excess_height;
  document.getElementById("scroll").style.height = height + "px";
}

window.onresize = function() { 
  setHeight();
}

window.onload = function() {
  setHeight();
}

* {
  padding: 0;
  margin: 0;
}
#header, #footer {
  background: red;
  //height: 20px;
}

#scroll {
  background: green;
  text-align: center;
  height: 60px;
  overflow: auto;
}

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

2 个答案: