How to Have Multiple Columns That Consume 100% Height Using Twitter Bootstrap

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

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.

Bootstrap 3 two columns full height

Edit:
In Bootstrap 4, native classes can produce full-height columns (DEMO) because they changed their grid system to flexbox. (Read on for Bootstrap 3)


The native Bootstrap 3.0 classes don't support the layout that you describe, however, we can integrate some custom CSS which make use of css tables to achieve this.

Bootply demo / Codepen

Markup:

<header>Header</header>
<div class="container">
<div class="row">
<div class="col-md-3 no-float">Navigation</div>
<div class="col-md-9 no-float">Content</div>
</div>
</div>

(Relevant) CSS

html,body,.container {
height:100%;
}
.container {
display:table;
width: 100%;
margin-top: -50px;
padding: 50px 0 0 0; /*set left/right padding according to needs*/
box-sizing: border-box;
}

.row {
height: 100%;
display: table-row;
}

.row .no-float {
display: table-cell;
float: none;
}

The above code will achieve full-height columns (due to the custom css-table properties which we added) and with ratio 1:3 (Navigation:Content) for medium screen widths and above - (due to bootstrap's default classes: col-md-3 and col-md-9)

NB:

1) In order not to mess up bootstrap's native column classes we add another class like no-float in the markup and only set display:table-cell and float:none on this class (as apposed to the column classes themselves).

2) If we only want to use the css-table code for a specific break-point (say medium screen widths and above) but for mobile screens we want to default back to the usual bootstrap behavior than we can wrap our custom CSS within a media query, say:

@media (min-width: 992px) {
.row .no-float {
display: table-cell;
float: none;
}
}

Codepen demo

Now, for smaller screens, the columns will behave like default bootstrap columns (each getting full width).

3) If the 1:3 ratio is necessary for all screen widths - then it's probably a better to remove bootstrap's col-md-* classes from the markup because that's not how they are meant to be used.

Codepen demo

Setting 100% height to columns in Twitter Bootstrap

try this:

html,body
{
height: 100%;
}

If that doesn't work, then use inspect element, and verify that parent elements have 100% height. (Because if they don't - then child elements won't get 100% height unless they are position:absolute or position:fixed

Twitter Bootstrap - 100% Height

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.

How can I make Bootstrap 4 columns have a height of 100%?

Use the Bootstrap 4 h-100 class for height:100%;

<div class="container-fluid h-100">
<div class="row justify-content-center h-100">
<div class="col-4 hidden-md-down" id="yellow">
XXXX
</div>
<div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8">
Form Goes Here
</div>
</div>
</div>

https://www.codeply.com/go/zxd6oN1yWp

You'll also need ensure any parent(s) are also 100% height (or have a defined height)...

html,body {
height: 100%;
}

Note: 100% height is not the same as "remaining" height.


Related: Bootstrap 4: How to make the row stretch remaining height?

Twitter Bootstrap: div in container with 100% height

Set the class .fill to height: 100%

.fill { 
min-height: 100%;
height: 100%;
}

JSFiddle

(I put a red background for #map so you can see it takes up 100% height)

Twitter Bootstrap Two Column Responsive Layout - Sidebar 100% height with fixed width

Check this out.

<div class="row">
<div class="span3" style="position:fixed;background-color:#46a546;height:100%;top:0px;" id="leftmargin">
position fixed navbar (out of .container)
</div>
</div>
<div class="container">
<div class="row">
<div class="span9 offset3" style="background-color:#049cdb;">
bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
</div>
</div>
</div>

And a bit of jQuery

function sizing() {
var windowwidth=$(window).width();
var containerwidth=$('.container').width();
if(windowwidth<1200) {
var diff=windowwidth-containerwidth+40;
}
else {
var diff=windowwidth-containerwidth+60;
}
$('#leftmargin').text("window="+ windowwidth+",container="+containerwidth);
if(windowwidth<=767) {
$('#leftmargin').css('margin-left', '0px');
$('#leftmargin').css('position', 'relative');
}
else {
$('#leftmargin').css('position', 'fixed');
if(diff>0) {
$('#leftmargin').css('margin-left', (diff/2) +'px');
} else {
$('#leftmargin').css('margin-left', '20px');
}
}
}
$(document).ready(sizing);
$(window).resize(sizing);

http://jsfiddle.net/NzqfL/3/

inspired by my previous post https://stackoverflow.com/a/10972425/1416911



Related Topics



Leave a reply



Submit