How to set percent height to fill browser window

Design help General
1

Hi,

1024×768 75.9 KB

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?

tks
Rui

2

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
3

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?

Rui

4

Actually I may be wrong. Someone at stackoverflow.com 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
5

Found the solution :smiley:

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

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
7

Sorry for the late response… :frowning:

function fillHeight() {
	var vh = $(window).height();
	$('#that-blue-thingy').css({
		'height' : (vh-$('.menubar').height())/3;
	});
}
$(document).ready(function() {
	fillHeight();
	$(window).resize(function() {
		fillHeight();
	});
});

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

8

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!”