使用引导程序固定页面高度答案

【问题标题】：Fixed page height with bootsprap使用引导程序固定页面高度
【发布时间】：2015-02-01 03:22:54
【问题描述】：

我想固定页面的高度，该页面没有滚动。我使用引导程序来创建布局。我有一个宽度相同的两列。当列有很多内容时，该列应该有一个滚动条。

我使用下一个 css 样式：

body {
  height: 100%;
}

#left {
  height: 100%;
  position: fixed;
}

#right {
  height: 100%;
  position: fixed;
}

jsfiddle

但这没有效果。如何做到这一点？

【问题讨论】：

你试过overflow: auto;吗？

标签： html css twitter-bootstrap

【解决方案1】：

首先，由于此 css 对左列和右列都是通用的，因此值得为它们都指定一个类（例如：.column）。

您可以使用max-height 和overflow-y 属性来实现：

.column {
  max-height: 100%;
  overflow-y: auto;
}

【讨论】：

【解决方案2】：

为此，您可以使用 CSS3 中的视口测量单位。

Viewport-Percentage

你也可以参考这个example。

还有一个例子。

HTML

<div class="container-fluid wrapper">

  <div class="row-fluid columns content"> 

    <div class="span2 article-tree">
      navigation column
    </div>

    <div class="span10 content-area">
      content column 
    </div>
  </div>

  <div class="footer">
     footer content
  </div>
</div>

CSS

html, body {
    height: 100%;
}
.container-fluid {
    margin: 0 auto;
    height: 100%;
    padding: 20px 0;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.columns {
    background-color: #C9E6FF;
    height: 100%;   
}

.content-area, .article-tree{
    background: #bada55;
    overflow:auto;
    height: 100%;
}

.footer {
    background: red;
    height: 20px;
}

这是原帖：Link

【讨论】：