javascript - 包含由 Javascript 添加的元素的边界 div

Question

试图制作一个包围所有元素的边框，这个 div 应该在第一个有一个高度和宽度，如果元素达到它的长度，它应该根据元素的数量扩展。

<div id="contText" ></div>

<input id="send" type="button" value="Send" onclick="myFunction()"></input>

CSS

         div#contText {

text-align: center;
top:30px;
width:400px;
height:300px;
background-color:white;
border:1px solid black;
        }

Javascript

function myFunction() {
  var para = document.createElement("P");
  var t = document.createTextNode("This is a paragraph.");
  para.appendChild(t);
  document.getElementById("contText").appendChild(para);
}

Answer 1

您可以使用min-height(和min-width)将高度初始设置为300px，然后随着内容展开在div增加

function myFunction() {
  var para = document.createElement("P");
  var t = document.createTextNode("This is a paragraph.");
  para.appendChild(t);
  document.getElementById("contText").appendChild(para);
}

div#contText {

  text-align: center;
  top:30px;
  min-width:400px;
  min-height:300px;
  background-color:white;
  border:1px solid black;
}

<div id="contText" ></div>

<input id="send" type="button" value="Send" onclick="myFunction()"></input>

如果你想让滚动条一直显示使用overflow-y: scroll

function myFunction() {
  var para = document.createElement("P");
  var t = document.createTextNode("This is a paragraph.");
  para.appendChild(t);
  document.getElementById("contText").appendChild(para);
}

div#contText {

  text-align: center;
  top:30px;
  width:400px;
  height:300px;
  background-color:white;
  border:1px solid black;
  overflow-y: scroll;
}

<div id="contText" ></div>

<input id="send" type="button" value="Send" onclick="myFunction()"></input>