html - 溢出和 css3 列

Question

我无法使 css3 列布局与定义高度的容器区域中的滚动一起使用。这是一个示例链接:

http://codepen.io/anon/pen/WQNeVX

我在css中所做的就是将它定义到容器区域-

#container {
  width: 500px;
  height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-column-count: 4; 
  -moz-column-count: 4;
  column-count: 4;
}

在这种情况下我应该怎么做才能使 overflow-y 像滚动一样工作？ 谢谢。

Answer 1

需要设置高度为max-height

body {
 margin: 0;
 padding: 0;
}
#container {
  width: 500px;
  max-height: 200px; /* like this*/
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-column-count: 4; 
  -moz-column-count: 4;
  column-count: 4;
}

第二种方法是这样做的，对于Moz、Opera、IE-9和Chrome是这样的:

更新的 CSS

body {
  margin: 0;
  padding: 0;
}
#container-wrapper{ 
  width: 500px;
  max-height: 200px;  
  overflow-y: scroll!important;
  overflow-x: hidden;
}
#container {
  -webkit-column-count: 4; 
  -moz-column-count: 4;
  column-count: 4;
}

更新的 HTML

<div id="container-wrapper">
   <div id="container">

   </div>
</div>

如果您仍然遇到任何问题，请回来。