Javascript 根据内部信息调整div的大小

我有一个容器，我想保存信息（将定期更新）。但有时，我可能希望此信息是长的或短的，为此，我的容器上不能有固定的高度，因此根据文本/信息的数量，它应该调整大小。这是我的剧本

HTML:

我想调整

新闻容器的大小，使其适应其中的内容量，但只根据高度调整大小。宽度应该保持不变。此外，如果div将更大，我如何移动该div下方的对象以适应页面的进一步向下移动，并为大容器腾出空间

干杯，尼克

<div style="width:200px; border: 1px solid black; max-height: 400px; overflow: scroll">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et iaculis dui, id dapibus nibh. Phasellus sollicitudin urna non elementum aliquam. Vivamus nec aliquet quam. Mauris eget sollicitudin tellus, at dictum tellus. Donec sed porttitor quam, in suscipit nisl. Praesent vestibulum auctor turpis quis vulputate. Quisque eget erat vel tellus pretium bibendum. Mauris feugiat urna nec pharetra bibendum. Integer consectetur nisl cursus aliquam rhoncus. Mauris vulputate pulvinar commodo. Mauris placerat enim erat, a dignissim metus laoreet quis. Aenean nec ipsum neque. Proin adipiscing tellus ut nisi rutrum tempus. Aliquam erat volutpat. In dignissim consectetur tellus sit amet sagittis. Nam ac quam id nunc adipiscing commodo. 
</div>

Lorem ipsum dolor sit amet，是一位杰出的献身者。阿利奎姆和艾库利斯酒后驾车，我的身份是尼布。无元素不平等现象。万岁。莫里斯·埃吉特·索利西图丁·泰卢斯，在《泰勒斯名言》中。Donec在suscipit nisl的porttitor quam。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。这是一个很好的例子。毛里斯·费吉亚特·乌尔纳·内特·法雷特拉·比本杜姆。整型连续性。毛里斯·沃普特pulvinar Comodo。莫里斯·普莱斯特拉特·埃尼姆·埃拉特，一位达官贵人，梅特斯·劳里特·奎斯。埃尼安·内克·伊普苏姆·内克。这是一种新的植物。阿利奎姆·埃拉特·帕特。艾米特·萨吉提斯坐在泰勒斯的贵宾席上。Nam ac quam id nunc adipiscing commodo。

如果对您来说不重要，请移除
溢出
和
最大高度
。我把它们放进去是为了证明纯css应该是您所需要的一切

随着div的增长，它下面的元素将被向下推，只要它们不是绝对定位的或浮动的等等。
您不应该在任何东西上设置高度。始终让内容自然增长



这里是新闻栏目！高度将根据数据量自动增长！永远不要用像素或百分比来控制高度！始终让内容自动增长。

#新闻容器{宽度：45%；背景：#CF4040；-webkit边框半径：7px；-moz边框半径：7px；边框半径：7px；位置：相对；左侧：3%；填充：.5em 1em；}

…当然，除非您需要一个可滚动的容器（如@griegs建议）。；）

然后你可以放一个最大宽度：10em；或者类似的东西

/** MAIN PAGE CONFIG CSS **/

html, body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    max-width: 1920px;
    max-height: 1050px;
    font-size: 100%;
}

html { 
  background: url(../images/JinxBG.jpg) 0 0 fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

p {
    color: white;
}

a:link {color: inherit;}
a:visited {color: inherit;}
a:active {color: inherit;}
a {text-decoration: none;}
/** MAIN CSS **/

/**NAVIGATION**/
#nav-bar {
    width: 100%;
    height: 10%;
    background-color: #A62D2D;
    position: fixed;
    box-shadow: 0px 2px 9px black;
    font-size: 100%;
    max-height: 10%;
    max-width: 100%;
}

#nav-bar-title {
    font-family: 'Sansita One';
    color: #262424;
    position: absolute;
    width: 20%;
    height: 100%;
    left: 0.3%;
    font-size: 1.8em;
    max-width: 16%;
    margin-top: 1.2%;
}

#nav-bar ul {
    list-style-type: none;
    color: #2E2C2C;
    font-family: 'Belleza';
    font-size: 1.5em;
    position: absolute;
    top: 0;
    max-width: 100%;
    max-height: 100%;
    left: 15%;
    line-height: 0%;
    margin-top: 0;
    margin-bottom: 10%;
    top: 50%;
}
#nav-bar li {
    margin-right: 45px;
    display: inline;
    height: 100%;
    -webkit-transition: color 0.5s ease;
}
#nav-bar li:hover {
    color: #C7C7C7;
    -webkit-transition: color 0.5s ease;
}

/** END NAVIGATION **/

/** MAIN TEXT BODY **/
#nav-body-divider {
    width: 100%;
    height: 1px;
    background: #B55050;

}

#main-body {
    max-width: 100%;
    max-height: 90%;
    background: #A62D2D;
    width: 70%;
    height: 100%;
    margin: auto;
    position: relative;
    top: 10%;
}

/** MAIN BODY NEWS **/

#home-body-title {
    font-size: 2.4em;
    font-family: Belleza;
    color: #C98A5D;
    position: relative;
    left: 3%;
    top: 0%;
}

#news-container {
    width: 45%;
    height: 40%;
    background: #CF4040;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    position: relative;
    left: 3%;
}

<div style="width:200px; border: 1px solid black; max-height: 400px; overflow: scroll">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et iaculis dui, id dapibus nibh. Phasellus sollicitudin urna non elementum aliquam. Vivamus nec aliquet quam. Mauris eget sollicitudin tellus, at dictum tellus. Donec sed porttitor quam, in suscipit nisl. Praesent vestibulum auctor turpis quis vulputate. Quisque eget erat vel tellus pretium bibendum. Mauris feugiat urna nec pharetra bibendum. Integer consectetur nisl cursus aliquam rhoncus. Mauris vulputate pulvinar commodo. Mauris placerat enim erat, a dignissim metus laoreet quis. Aenean nec ipsum neque. Proin adipiscing tellus ut nisi rutrum tempus. Aliquam erat volutpat. In dignissim consectetur tellus sit amet sagittis. Nam ac quam id nunc adipiscing commodo. 
</div>

<div id="news-container">
  <p>
    This is the news section! height will automatically grow depending on the amount of data! you should NEVER control height with pixels or percentage! always let the content grow it automatically.
  </p>
</div>


<style>
#news-container { width: 45%; background: #CF4040; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; position: relative; left: 3%;  padding: .5em 1em; }
</style>