jquery - 添加新子项时防止 DIV 容器高度增长

Question

我有一个动态包装器，位于页面中心，具有百分比高度。

内部是一个固定高度的导航栏和一个占据剩余空间的新闻源(100% 的包装器减去导航栏)。

我正在通过 JavaScript 将新的新闻元素添加到 Feed。

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

这个问题让我发疯，感谢任何帮助!

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

[更新]

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

在我的示例中，文本区域保留在外部 #wrapper 内，但将导航推到顶部。在 codepen 示例中，文本区域显示了正确的行为，但并未占据 100%。无论哪种方式，它都不起作用:-( http://codepen.io/anon/pen/nGmua

** 解决方案 **

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

我们不是通过 height = 100% 而是通过固定的顶部和底部 = 0px 来拉伸(stretch)容器；只要父容器有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;  
}