包含由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>