Twitter Bootstrap - 100% Height

Question

I'm trying to design an Admin panel for my application using twitter-bootstrap framework but i cannot get my layout to work.

I was inspired by this design: enter image description here
It would be a two column layout "Sidebar" and "Main content" but I can't get the 100% height to work. I managed to get 2 column layout with 100% width using this code:

HTML

<div class="container-fluid">
 <div class="row-fluid">


   <div class="span2 colorize-white">
     <!--Sidebar content-->Sidebar
   </div>


   <div class="span10 colorize-white">
     <!--Body content-->Main
   </div>


 </div> 
</div>

CSS

/* Global */
html, body {
    color: #6B787F;
    padding: 0;
    height: 100%;
    background: #11161a;
    font-family: 'PT Sans' !important;
}

.colorize-white {
    background: #FFFFFF;
}

.no-margin {
    margin: 0;
}

I'm half way there but there are two things I can't solve.
1) 100% Height
2) Getting rid of outer margins on second image

enter image description here You can see that I have margin between browser border and Sidebar/Main elements and then margin between the two. I need to get rid of this if I add no-margin to all my elements in HTML i pasted including body tag i still don't get 100% height and i still cant get rid of margins between browser border and sidebar and main content while the margin space between Sidebar and Main content disappears.

Sorry, but are you looking to get the same design as the img? — Mee, Apr 27 '13 at 23:38
No. I was looking for inspiration browsing some Admin Panel templates and this one poped up as a two column one. It's 100% width/height what I want to. — Sterling Duchess, Apr 27 '13 at 23:54

score 7 · Accepted Answer · answered Apr 27 '13 at 23:51

I'm not so sure Bootstrap's grid model is what you're looking for here. You may instead be looking for absolute positioning. For example:

#sidebar, #content {
    position: absolute;
    top: 0;
    bottom: 0;
}
#sidebar { left: 0; width: 10em; }
#content { left: 10em; right: 0; }

Try it out.

score 6 · Answer 2 · answered Jan 17 '14 at 11:05

6

Here is an example that works for Bootstrap 3..

Make sure the HTML and body are both 100% height. Wrap the sidebar and content and then use position:absolute on the sidebar.

http://www.bootstrapzero.com/bootstrap-template/basis

Code: http://bootply.com/86704

answered Jan 17 '14 at 11:05

Carol Skelly

351,302
90
710
624

worked, one more question, do you know how to make it work with fixed top navbar? – avances123 Feb 13 '14 at 20:56

score 1 · Answer 3 · answered Apr 27 '13 at 23:47

1

I am not sure if this is what you are looking for, but here it goes.

just modified the CSS slightly. margin:0; to html, body tag.

answered Apr 27 '13 at 23:47

Mee

158
7

Twitter Bootstrap - 100% Height

3 Answers3

Linked