固定页面高度与bootsprap

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

我用下一个CSS样式：

body { 
    height: 100%; 
} 

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

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

jsfiddle

但这没有影响。如何实现这一目标？

来源

2015-01-31 lito

你尝试'溢出：汽车;'？ – dfsq 2015-01-31 18:46:28

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

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

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

来源

2015-01-31 18:48:04 MTCoster

似乎不起作用http://jsfiddle.net/q5z7wemz/17/ – lito 2015-01-31 18:54:25

对于您可以使用视测量单位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

来源

2015-01-31 19:22:54

固定页面高度与bootsprap

回答

相关问题