Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 423
Sterling Duchess Avatar asked Apr 27 '13 23:04

Sterling Duchess


People also ask

How can I set full height in bootstrap?

You can also use max-width: 100%; and max-height: 100%; utilities as needed.

How do you use 100% height?

Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.

How do I make bootstrap 100% width?

If you want to have a true 100% width element, simply put a w-100 class on your div without container . In your case, when you are using a container , switch it to a fluid one by replacing it with container-fluid , and adding a p-0 class as well.

Which bootstrap class will you use to get 100% width of a div?

Bootstrap comes with three different containers: .container , which sets a max-width at each responsive breakpoint. .container-fluid , which is width: 100% at all breakpoints. .container-{breakpoint} , which is width: 100% until the specified breakpoint.


3 Answers

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.

like image 123
icktoofay Avatar answered Nov 11 '22 17:11

icktoofay


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

like image 32
Zim Avatar answered Nov 11 '22 17:11

Zim


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.

like image 1
Mee Avatar answered Nov 11 '22 17:11

Mee