html - 当css3列向右扩展时，DIV的宽度没有以固定高度增长

Question

小提琴：http: //jsfiddle.net/sdthelord/tnsLE/

<div id="out">
  <div id="in">
    <P>
      Lorem ipsum...
    </P>
  </div>
</div>

#in {
  -moz-column-width: 200px;
  column-width: 200px;
  height: 400px;
  border: 1px solid red;
}
#out {
  border: 1px solid blue;
}

我在水平布局页面上有一个带有 CSS3 列和固定高度的 DIV。此 div 包含在另一个 div 元素中，该元素也包含标题 h1。

关键是，我最初不想指定两个 div 的宽度，因此宽度为 100% 或自动，并且最小宽度样式确保它不会缩小（不在小提琴中）。

问题是，给 div 的边框，您会看到即使添加了新列并且内容需要更多空间，div 的大小/宽度也不会增长。有没有办法强制列的 div 与包含所有列一样大？

Answer 1

这是小提琴

添加height: 100%;到您的#in{...}CSS

IE

#in {
    -moz-column-width: 200px;
    column-width: 200px;
    height: 400px;
    border: 1px solid red;
    height: 100%;
}