将带有javascript的元素添加到DIV（高度100％）不会改变div的高度？答案

【问题标题】：Adding elements with javascript to DIV (height 100%) doesn't change the div's height?将带有javascript的元素添加到DIV（高度100％）不会改变div的高度？
【发布时间】：2016-01-19 07:54:54
【问题描述】：

我有一个 DIV 元素，里面还有一个 DIV 作为我网站正文中的最后一个元素。我想将它的高度拉伸到 100% 并给它一些背景颜色（到目前为止工作正常），但我在网站上有一个按钮，可以向内部 DIV 添加一个表格。

问题：当我不断添加其中一些表格时，它们会从 div 溢出 - div 的彩色背景不会随着它的内容而延伸（下面的小提琴演示了我的问题，只需单击继续几次，您就会看到文字超出了蓝色区域，但蓝色区域不再延伸）。

有没有办法做到这一点？

非常感谢。

HTML 代码

<div id="button">
proceed
</div>
<div id="box">
  <div id="results">
  </div>
</div>

CSS 代码

html, body {
  height: 100%;
}

#box {
  width: 100%;
  height: 100%;
  background-color: #3498eb;
}

#clearDiv {
  clear: both;
}

Javascript 代码

var button = document.getElementById('button');
button.addEventListener('click', function(event) {
    var results = document.getElementById('results');

  for (var i = 0; i < 10; i++)
  {
    var table = document.createElement('table');
    var row = document.createElement('tr');
    var cell1 = document.createElement('td');
    var cell2 = document.createElement('td');
    results.appendChild(table);
    table.appendChild(row);
    row.appendChild(cell1);
    row.appendChild(cell2);
    cell1.innerHTML = 'test1';
    cell2.innerHTML = 'test2';
  }

  console.log('done');
}, false);

fiddle here

【问题讨论】：

标签： javascript html css

【解决方案1】：

使用min-height 代替height。 height 告诉元素保持在特定高度。另一方面，min-height 设置元素的最小高度，并允许它在需要时扩展。

#box {
  width: 100%;
  min-height: 100%;
  background-color: #3498eb;
}

演示

var button = document.getElementById('button');
button.addEventListener('click', function(event) {
	var results = document.getElementById('results');
	
  for (var i = 0; i < 10; i++)
  {
    var table = document.createElement('table');
    var row = document.createElement('tr');
    var cell1 = document.createElement('td');
    var cell2 = document.createElement('td');
    results.appendChild(table);
    table.appendChild(row);
    row.appendChild(cell1);
    row.appendChild(cell2);
    cell1.innerHTML = 'test1';
    cell2.innerHTML = 'test2';
  }

  console.log('done');
}, false);

html, body {
  height: 100%;
}

#box {
  width: 100%;
  min-height: 100%;
  background-color: #3498eb;
}

#clearDiv {
  clear: both;
}

<div id="button">
proceed
</div>
<div id="box">
  <div id="results">
  </div>
</div>

【讨论】：

【解决方案2】：

更改您的 CSS：

html,
body {
  height: 100vh;
}
#box {
  position: relative;
  min-width: 100%;
  min-height: 100%;
  background-color: #3498eb;
  overflow: auto;
}
#results {
  position: absolute;
  top: 0;
  left: 0;
}

https://jsfiddle.net/zer00ne/mw1w4ykb/

【讨论】：

【解决方案3】：

应该可以简单的改变：

#box {
  width: 100%;
  min-height: 100%;
  background-color: #3498eb;
}

【讨论】：

overflow-y 是 NOT 标准化的，这与流行的看法相反。由于这个原因，Firefox 也不支持它。