Question

我想修复页面的高度，该页面没有滚动。我使用bootstrap来创建布局。我有一个宽度相同的两列。当列有很多内容时，此列应该有一个滚动条。

我使用下一个css样式：

body {
  height: 100%;
}

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

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

jsfiddle

但这没有效果。怎么做到这一点？

Answer 1

首先，因为这个css对于左右列都是通用的，所以值得给它们一个类（例如：.column）。

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

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

Answer 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

固定页面高度与引导程序

2 个答案: