CODEWITHSUNDEEP
csstwitter-bootstrap
Sterling Duchess
Sterling Duchess

Reputation: 2080

Twitter Bootstrap - 100% Height

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.

Upvotes: 14

Views: 29834

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362270

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

Upvotes: 6

icktoofay
icktoofay

Reputation: 128991

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.

Upvotes: 7

Mee
Mee

Reputation: 158

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.

Upvotes: 1

Related Questions