Help to make layout 100% height

[Historical Forums User]

Hi

I´m trying to make a simple layout 100% height.

Apparently the layout seems to be 100% of height but when resizing the browser and open the menu item 10 it is clear that it is not.

See: [http://codepen.io/adilson/pen/kiHsd](http://codepen.io/adilson/pen/kiHsd “http://codepen.io/adilson/pen/kiHsd”)

Another problem is that the column border “sidebar” is not going to the bottom of the page.

Any help is welcome :)

Thank you!

[unasAquila]

CSS —

html{
width :100%;
height:100%;
}

setting the html to 100% width and height will do the trick.

[Historical Forums User]

Hi unasAquila

I added the code and the problem persists. :(

Also tried using the code below.

html, body
{
width :100%;
height: 100%;
}

Any hint?

Thank you..

[unasAquila]

a Jquery alternative

if ($(‘#sidebar’).height() < $(document).height()){
$(‘#sidebar’).css(‘height’, $(document).height()+’px’);
}

if ($(‘#content’).height() < $(document).height()){
$(‘#content’).css(‘height’, $(document).height()+’px’);
}

[Historical Forums User]

Not work to me :(

$(document).resize(function() {
if ($(‘#sidebar’).height() < $(document).height()){
$(‘#sidebar’).css(‘height’, $(document).height()+’px’);
}

if ($(‘#content’).height() < $(document).height()){
$(‘#content’).css(‘height’, $(document).height()+’px’);
}
});

[unasAquila]

first

$(document).resize(function()

needs to be

$(window).resize(function()

the problem here is that it wont be called until the window is re-sized

it is best to call it in the document ready.

$(document).ready(function() {

if ($(‘#sidebar’).height() < $(document).height()){
$(‘#sidebar’).css(‘height’, $(document).height()+’px’);
}

if ($(‘#content’).height() < $(document).height()){
$(‘#content’).css(‘height’, $(document).height()+’px’);
}

initMenus();

});

[Historical Forums User]

Hi unasAquila

The page now has more than 100% height :(

See a image: [Sample Image](https://lh3.googleusercontent.com/-eSlmitl5Woo/UZB8q-V91hI/AAAAAAAAK9w/P-Y-UDOrQWQ/w699-h568-no/Captura+de+tela+inteira+13052013+023915.jpg “Sample Image”)

And have a small white part in sidebar.. :(

I appreciate the help you are giving up to now.

Thank you

[unasAquila]

maybe try window

$(document).ready(function() {

if ($(‘#sidebar’).height() < $(window).height()){
$(‘#sidebar’).css(‘height’, $(window).height()+’px’);
}

if ($(‘#content’).height() < $(window).height()){
$(‘#content’).css(‘height’, $(window).height()+’px’);
}

initMenus();

});

[David_Leitch]

Strangely, the solution to this problem is to use tables (well, display: table). I know, how scandalous. I’ve forked your CodePen [here](http://codepen.io/anon/pen/DivFj “http://codepen.io/anon/pen/DivFj&#8221;).

[Historical Forums User]

David, was exactly what I wanted!

I do not know if it’s possible to do that without using “display: table”, but the solution you presented is the best alternative so far.

Here’s an example of what I’m trying to do: [Admin Panel](http://www.keenthemes.com/preview/metronic/layout_blank_page.html “Admin Panel”)

I just do not want the header and footer of this model, but the rest is exactly what I want to do.

Thank you..

[Historical Forums User]

David, I make a test using IE10 and the layout is broken, the sidebar is on left but de content is under sidebar not in right of sidebar..

Forget, the problem is a config in browser..

[Author]

Posts