2

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

里面是一个固定高度的导航栏和一个占据剩余空间的新闻提要（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; 就可以使用。

4

1 回答 1

0

问题似乎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;  
}
于 2013-11-03T00:31:16.710 回答