html - 最小高度为 100% 的三列布局

Question

如何创建具有最小 100% 高度 的三列布局，将随页面滚动。

<div class="container">
    <div class="row">
      <div class="col-sm-4"></div>
      <div class="col-sm-4"></div>
      <div class="col-sm-4"></div>
    </div>
</div>

我不确定如何提供最小 100% 的高度 并带来一个随页面滚动。

Answer 1

基本上，使用表格布局的display 属性就很好: DEMO

html, body, .container {
    height:100%;
    width:100%;
    margin:0;
    background:lightgray
}
.container {
    display:table;
    border-spacing:0.5em;
}
.row {
    display:table-row;
}
.col-sm-4 {
    display:table-cell;
    background:white;
}