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
Css3 Transitions: Is There an on Click Option Without Using Jquery
CSS Counter-Reset on Nested List
How to Change a Background Image Opacity Without Changing on Div Content
How to Float Text Around Image in React Native
Why Border of <Tr> Not Showing in Ie
:First-Letter Selector Doesn't Work for Link
Avoid Z-Index Working Relative to the Parent Element
Count Number of Selectors in a CSS File
Calculate a Percent with SCSS/Sass
Capsule Shape Using Border-Radius Without a Set Width or Height
Create a Radial Gradient for Internet Explorer 6/7/8
-Webkit-Transform-Style: Preserve-3D Not Working
How to Make Background-Image with Linear-Gradient Work on Ie 11
Svg Spritesheet Targeting with CSS
CSS Transition - Fade Element on Hover Only