固定頁面高度與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

回答

相關問題