添加新子项时防止 DIV Container 高度增长

Question

我有一个以百分比高度为中心的动态包装器。

里面是一个固定高度的导航栏和一个占据剩余空间（100% 的包装器减去导航栏）的新闻提要。

我正在通过 javascript 将新的新闻项目添加到提要中。

问题：容器随着新闻而增长。 如果它有一个固定的高度，比如 200px，它就不会增长；但这不是我想要的。

这个问题快把我逼疯了，感谢任何帮助！

在这里查看：http://codepen.io/anon/pen/vedwA

[更新]

如果我在#itemsContainer 中有一个文本区域而不是新闻源怎么办？当然，textarea 还必须占据 itemscontainer 的 100% 的高度和宽度，并且即使用户输入更多文本，也必须保持该大小。

在我的示例中，textarea 位于外部 #wrapper 内，但会将导航推到顶部。在 codepen 示例中，textarea 显示正确的行为，但不占用 100%。无论哪种方式，它都不起作用:-( http://codepen.io/anon/pen/nGmua

** 解决方案**

position: absolute;
top: 50px;
bottom: 0px;
width: 100%;

我们不是通过 height = 100% 而是通过固定的顶部和底部 = 0px 来拉伸容器； 只要父容器有 position: relative;

Answer 1

问题似乎是各种形式的display: table 以及#wrapper 的默认overflow: visible。从技术上讲，您的新闻项目并没有溢出，而是扩大了表格。

解决方案需要将overflow: hidden 应用于#wrapper。但是，overflow 属性不适用于表格元素。所以，我们摆脱了display: table。请参阅下面代码中的注释。

希望对你有帮助。

body {
  background: #900;
}

div {
  padding:0px;
  margin:0px;
  background: grey;
  color: white;
  text-align: center;
}

#wrapper{
  position:absolute;
  width: 40%;
  height: 50%;
  background: red;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid white;
  /* display: table;  should be block */
  overflow: hidden /* added */
}

#navigation{
  top:0px;
  height:50px;
  width: 100%;
  background: black;     
}

#itemsContainer{
  top:20px;
  /* width:100%;
     height: 100%;
     overflow: hidden;  you don't need these any more */
  background:red;
  /* display:table-row; should be block */
}

#itemsContainer div{
  border-bottom: 1px dashed white;
  padding: 1em;  
}