Member Avatar for Dat0

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
  • 78 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for MidiMagic

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).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.