Extending a div to the bottom of the page

[GeemanKan]

I'm having some trouble with making the div height the remaining space left in the y-axis. Is there any way to do this perhaps:

height: 100% - 140px;

[Day]

In order for an element to take on 100% height of the window, you'll have to give html and body 100% heights as well. Also, to do the math your trying to do in css, it needs to be written out as:

height: calc(100%-140px);

calc() isn't supported in earlier versions of IE, but you could also do something like this:

http://daylidesign.com/tests/remainingHeight.html

 

html:

<div class="widthContainer">	<div class="topContent">		<p>Top Content</p>	</div>	<div class="remainingHeight_container">		<div class="bottomContent">			<p>Bottom Content</p>		</div>	</div></div>

css:

html, body {	height: 100%;	margin: 0;}.widthContainer {	width: 960px;	height: 100%;	margin: 0 auto;	position: relative;}.topContent {	background: #CCC;	width: 100%;	height: 140px;	position: absolute;	top: 0;}.remainingHeight_container {	background: #999;	height: 100%;	overflow: hidden;}.bottomContent {	margin-top: 150px;} 

You could also use JavaScript.

Edited May 18, 2014 by Day

[dsonesuk]

Use min-height:100% on .remainingHeight_container, else you sacrifice the ability of element to extend with content.