# Help with div height match page

**URL:** https://forum.kirupa.com/t/help-with-div-height-match-page/261393
**Category:** web dev
**Created:** [May 27, 2008, 9:16am UTC](https://forum.kirupa.com/t/help-with-div-height-match-page/261393 "2008-05-27T09:16:17Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![ht56y](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ht56y/32/3583_2.png) [@ht56y](https://forum.kirupa.com/u/ht56y)
#### Post date: [May 27, 2008, 9:16am UTC](https://forum.kirupa.com/t/help-with-div-height-match-page/261393/1 "2008-05-27T09:16:17Z")

</div>

Hi

Im developing a website, and im having troubles making it look right, because i have a div that should resize to the page height, but still leave room for the header and footer. And it’s not working!

This is how the site is structured :

```auto
<div id="wrapper">
<div id="menu">
here is the top content, banner and menu
</div>
<div id="content">
Heres the problem, i need this div to resize so it fits the height of the window, so if you have a very small screen, it will probably have scrollbars, and if you have a huge screen, it will resize to fit that height
</div>
<div id="footer">
and here should be some more stuff, but your not supposed to scroll down to see it. It should be on screen always, right after the content div.
</div>
</div>

```

And heres my CSS (simplifyed) :

```auto
html, body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	height:100%;
	min-height:100%;
	min-width: 100%;
	
}
#wrapper{
	width:874px;
	position:absolute;
	left:50%;
	margin-left:-437px;
	background-color:#FF2800;
	height:100%;
} 
#menu {
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	padding: 10px 10px 10px 10px;
	float: left;
}
#content {
	background-color: #FFFFFF;
	width: 734px;
	padding: 30px 50px 30px 50px;
	margin: 0px 20px 0px 20px;
	overflow:auto;
overflow-x:hidden; 
}
#footer {
	width: auto;
	text-align: right;
	background-color: #0000FF;
	padding: 10px 20px 20px 20px;
}

```

Please help me out, since im getting very close to a deadline 😑

---

<div class="post-metadata">

### Author: ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)
#### Post date: [May 27, 2008, 2:20pm UTC](https://forum.kirupa.com/t/help-with-div-height-match-page/261393/2 "2008-05-27T14:20:25Z")

</div>

[http://www.google.ca/search?q=css+100%+page+height&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a](http://www.google.ca/search?q=css+100%25+page+height&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a)