Streaming live at 10am (PST)

How to set percent height to fill browser window


I have a problem with an height element.

Has you can see, i have a navbar with 80px height and exactly 9 elements, but i want this 9 element (div´s/columns) to fill the hole screen.
The with is easy, 100/3=33,3
The height is the problem, i cannot use pixels, and the % don´t work.

Has anyone had this type of problem before?


Unfortunately CSS doesn’t make it easy to set a percent height and have it fill that %. When you set a % height on something, it calculates % of the parent. If the parent has a % height as well…it doesn’t work. The parent element has to have an explicit height (in pixels).

So you have to resort to javascript to solve this. @bartekkustra wasn’t there some code you made for this problem using some simple jQuery?

1 Like

Tks for the feedback.
before posting this, i search a lot and that was my impression.

@bartekkustra , Do you have a ninja javascript for this?


Actually I may be wrong. Someone at said:

If you want to make the div height a percentage of the viewport height, every ancestor of the div, including and , have to have height: 100%, so there is a chain of explicit percentage heights down to the div.

So try to set the height of all the parents be percent height (currently the <html> and <body> elements are set to 100% by default. Then set these to be 33.33%. I think the navbar in that case has to have a % height as well because you can’t mix pixels and % and expect them to equal 100% of the height.

1 Like

Found the solution :smiley:

<script>$('.nameDiv').height((($(document).height() - 86) / 3) + 'px');</script>

FWIW, I’ve tried setting 100% (and min 100%) all the way up the chain to body, but can’t get that to work. Going to try @Rui_Almeida’s js solution.

“We can put a man on the moon, but we can’t set a div to 100% height…”

1 Like

Sorry for the late response… :frowning:

function fillHeight() {
	var vh = $(window).height();
		'height' : (vh-$('.menubar').height())/3;
$(document).ready(function() {
	$(window).resize(function() {

Yes you can. You just have to have the parent block to have fixed height :wink:

Thanks @bartekkustra!

Ok, revised to “We can put a man on the moon, but we can’t set a div to 100% height…with pure css!”