Question

我有一个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

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

Answer 2

更改CSS：

paintComponent

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

Answer 3

应该可以简单地改变：

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

使用javascript向DIV添加元素（高度100％）不会改变div的高度？

3 个答案: