如何使用twitter bootstrap使用多個消耗100％高度的列？

我看到了一些類似的問題，但還沒有找到我正在尋找的答案。更多信息如下：如何使用twitter bootstrap使用多個消耗100％高度的列？

我使用Twitter的引導，所以我想一個解決方案，它
兼容的佈局看起來like this。對不起，我無法嵌入圖像，因爲我需要首先10個點。
This就像我到目前爲止一樣接近。問題是我無法讓側邊欄停在頁腳上。
我需要將主要內容展開爲與側邊欄相同。
側邊欄和主要內容是兩種不同的顏色，大小不同。它們必須延伸到頁腳
注意，最小高度必須是100％
頁腳應該移動，如果內容的增加太多（即它需要滾動才能看到它）
我沒有想使用JavaScript，但如果需要的話，只要使用JS逐漸增強（我也使用jQuery），我不會介意解決方案。
頁面內容與固定寬度

2012-04-20 John Kholler

我認爲這可能是，你在找什麼：two column layout^source。

主要思想是設置height: 100%兩個<body>和<html>，然後確保容器也佔用了所有的高度（通過min-height: 100%）。您可能會注意到，代碼還包含IE6的解決方法，因爲它最初編寫的時候，與IE6只是另一天的工作。

這是通過修改一些更復雜和更經常使用holy grail layout^source。

來源

2012-04-20 04:59:56

感謝這就是我一直在尋找的。直到我有15個聲望，我才能投票，但我表示這是正確的答案。 – 2012-04-20 13:51:47

這是如何回答「使用twitter引導」的問題？ – DGM 2012-07-26 18:35:51

爲什麼會有影響？ – 2012-07-26 18:53:27

通過CSS有可能，但需要一些技巧，水平居中。

您需要通過添加padding-bottom：1000px來使div /列非常高，然後使用margin-bottom：-1000px來欺騙瀏覽器。最好通過下面的例子來解釋。

http://jsfiddle.net/mediasoftpro/Ee7RS/

希望這將是好的。

來源

2012-04-20 03:12:24 irfanmcsd

感謝您的例子。我已經看到一些使用JavaScript的例子，但強烈不願意這樣做;無論如何，這個例子非常感謝。你知道我的需求是否可以不使用JavaScript？ – 2012-04-20 03:52:50

好吧，我更新的例子，並通過CSS來完成。 – irfanmcsd 2012-04-20 04:46:31

嘿，我想你想這

的CSS

.wraper, .header, .footer{ 
width:80%; 
    margin:0 auto; 
    overflow:hidden; 
    border:solid 2px red; 
} 
.header{ 
    height:100px; 
    background:green; 
    border-color:darkred; 
} 
.sidebar{ 
width:20%; 
    background:yellow; 
    float:left; 
} 
.content{ 
width:70%; 
    background:pink; 
    float:right; 
} 
.footer{ 
    height:100px; 
    background:blue; 
    border-color:black; 
} 
#container2 { 
background: none repeat scroll 0 0 #FFA7A7; 
clear: left; 
float: left; 
overflow: hidden; 
width: 100%; 
} 
#container1 { 
background: none repeat scroll 0 0 #FFF689; 
float: left; 
position: relative; 
right: 75%; 
width: 100%; 
} 
#sidebar { 
float: left; 
left:76%; 
overflow: hidden; 
position: relative; 
width: 20%; 
text-align: justify; 
} 
#content { 
    float: left; 
    left: 81%; 
    overflow: hidden; 
    position: relative; 
    text-align: justify; 
    width: 72%; 
}

** HTML

<div class="header">header bar </div> 
    <div class="wraper"> 
     <div id="container2"> 
    <div id="container1"> 
     <div id="sidebar"> 
      This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text 
     </div> 
     <div id="content"> 
      This is dummy text here This is dummy text here This is dummy 
     </div> 
    </div> 
</div> 
    </div> 
     <div class="footer">Footer bar</div>

現場演示http://jsfiddle.net/rohitazad/Pgy75/2/

來源

2012-04-20 05:07:59

您可以顯示嘗試：表;至Parent Div and display：table-cell;到兒童事業部實現你的結果....

看到代碼： -

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    .container { 
    background:red; 
    width:600px; 
    display:table; 
    } 

    .left { 
    background:yellow; 
    width:200px; 
    display:table-cell; 

    } 


    .mid { 
    background:blue; 
    width:400px; 
    display:table-cell; 


    } 

     .right { 
    background:green; 
    width:200px; 
    display:table-cell; 

    } 



</style> 
</head> 
<body> 
    <div class="container"> 
    <div class="left">shailender</div> 
     <div class="mid">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 
     fff</div> 
     <div class="right">afdafaf</div> 


    </div> 
</body> 
</html>

演示： -http://jsbin.com/ebucoz/13/edit

來源

2012-04-20 07:06:34

Bootstrap的使用在哪裏？（和'float'attribut） – Georgio 2015-07-09 12:04:13

唯一真正的回答：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<table border="1" height="100%" width="100%"> 
    <tr> 
     <td width="10%"> 
      left 
     </td> 
     <td> 
      right 
     </td> 
    </tr> 
</table>

來源

2014-08-13 15:30:28 sproketboy

+1我該笑還是哭？ – bishop 2014-09-19 01:47:05

如何使用twitter bootstrap使用多個消耗100％高度的列？

回答

相關問題