How to have multiple columns that consume 100% height using twitter bootstrap?

Question

I have seen a number of similar questions, but have not found an answer for what I am looking for. Further information is as follows:

I am using twitter bootstrap, so I would like a solution that is compatible with it
The layout will look like this. Sorry I cannot embed the image because I need 10 pts first.
This is as close as I have gotten so far. The problem is that I cannot get the sidebar to stop at the footer.
I will need the main content to expand the same as the sidebar.
The sidebar and Main Content are two different colors and vary in size. They must both extend to the footer
Notice that the minimum height must be 100%
The footer should move if the content grows too much (i.e. it would require scrolling to see it)
I do no want to use JavaScript, but if it is required I wouldn't mind a solution with so long as it is progressively enhanced with the JS (I am also using jQuery).
The page content is centered horizontally with a fixed width

tereško · Accepted Answer · 2013-01-15T21:01:50.810

14

I think this might be, what you are looking for: two column layout ^source.

The main idea is to set height: 100% on both <body> and <html> and then make sure that the container also takes up all the height (via min-height: 100%). You might notice that code also contains workaround for IE6, because it was originally written, when fighting IE6 was just another day of work.

This was made by modifying a bit more complicated and more often used holy grail layout ^source.

edited Jan 15 '13 at 21:01

answered Apr 20 '12 at 04:59

tereško

58,060
25
98
150

Thanks this is what I was looking for. I cannot up-vote until I have 15 reputation but I have indicated this was the correct answer. – John Kholler Apr 20 '12 at 13:51
10

How does this answer the question of "using twitter bootstrap" ? – DGM Jul 26 '12 at 18:35
Why would that have any impact ? – tereško Jul 26 '12 at 18:53

irfanmcsd · Answer 2 · 2012-04-20T04:46:09.013

2

Via css it may be possible but need some tricks.

You need to make both divs/columns very very tall by adding a padding-bottom: 1000px and then "trick the browser" into thinking they aren't that tall using margin-bottom: -1000px. It is better explained via example below.

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

Hope this will be ok.

edited Apr 20 '12 at 04:46

answered Apr 20 '12 at 03:12

irfanmcsd

6,533
7
38
53

Thanks for the example. I have seen a few examples that use JavaScript, but strongly prefer not to require it; regardless, the example is much appreciated. Do you know if my requirements are possible without using JavaScript? – John Kholler Apr 20 '12 at 03:52

score 1 · Answer 3 · answered Apr 20 '12 at 07:06

You can try with display:table; to Parent Div and display:table-cell; to Child Div for achieving your results....

see the code :-

<!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>

Demo:- http://jsbin.com/ebucoz/13/edit

Read More About Fluid Width Equal Height Columns with Examples

Where is the use of Bootstrap? (and 'float' attribut) – Georgio Jul 09 '15 at 12:04 — Georgio, Jul 09 '15 at 12:04

score 0 · Answer 4 · answered Apr 20 '12 at 05:07

Hey i think you want this

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>

Live demo http://jsfiddle.net/rohitazad/Pgy75/2/

more about this click here http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

score 0 · Answer 5 · answered Aug 13 '14 at 15:30

The only real answer:

<!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>

How to have multiple columns that consume 100% height using twitter bootstrap?

5 Answers5

Linked