Question

我有一个以页面高度为中心的动态包装器。

里面是一个导航栏，它有一个固定的高度和一个占用剩余空间的新闻源（100％的包装器减去导航栏）。

我正在通过javascript向Feed添加新的新闻。

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

这个问题让我发疯，任何帮助表示赞赏！

[UPDATE]

如果#itemsContainer中有textarea而不是newsfeed怎么办？ textarea当然也占据了物品容器100％的高度和宽度，即使用户经过更多的文字也必须保持这个尺寸。

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

**解决方案**

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

我们不是通过高度= 100％拉伸容器，而是通过固定的顶部和底部= 0px; 只要父容器具有position：relative;

，这就可以工作

Answer 1

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

解决方案需要将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;  
}

添加新子项时，防止DIV容器在高度上增长

1 个答案: