Question

如何使用three column layout创建minimum 100% height，scroll with page。

<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>

我不确定如何给出最低height of 100%并带来scroll with page。

Answer 1

如果您的100％高度容器位于文档正文中，请确保您的文档正文和html元素都跨越100％高度。

你的css应该是这样的：

html, body {
  height: 100%;
}

Answer 2

基本上，使用表格布局的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;
}

Answer 3

类似的东西：

html,body {height:100%;margin:0;background:#eee}
.container {height:100%}
.row {overflow:auto;height:100%;}
.col-sm-4 {height:100%;float:left;background:white;margin:0 1%;width:31.3333%}

http://jsfiddle.net/S379x/

三列布局，最小高度100％

3 个答案: