0

I want my 3 div boxes, added together, to fill the viewport size. Two of the div boxes (#top and #bottom) have a fixed height. I want it so that the #body div automatically adjust it's height so that the sum of the three divs = viewport size.

#divtop + #divbody + #divbottom = viewport.

<style>
html, body{height:100%; padding:0px;}
#divwrapper{height:100%;}
#divtop{height:300px;}
#divbody{}
#divbottom{height:20px;};

<html><body>
<div id="divwrapper">
	<div id="divtop">top
	</div>
	<div id="divbody"> body
	</div>
	<div id="divbottom"> bottom
	</div>
</div>
</body></html>

The problem is that #divbody automatically renders as a bloc with a default height, and does not automatically adjust it's height so that the three div boxes, together, takes up viewport height.

Thank you.

2
Contributors
1
Reply
2
Views
8 Years
Discussion Span
Last Post by MidiMagic
0

There is no way to universally make something take the height of the viewport. Don't even try - it's a waste of time.

There is no standard way across browsers to do this. A height of 100% on the outermost container takes the viewport size in some browsers, but takes the document size in others. And there is no standard way to retrieve the size of the viewport with a script that works on all browsers.

The Internet is not designed to deliver a viewport-sized web page. It is designed to start at the top, and then expand the page down until all of the content is exhausted.

One thing you have to consider is that viewports have all sizes and shapes. The viewport depends on the screen resolution, the screen aspect ratio, the browser used, the toolbars in use, and the restored-down sizes of the window (if used).

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.