1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Div with 100% height of body container in HTML5, header takes some space

Discussion in 'CSS' started by Mike224, Jun 21, 2011.

0
  1. #1
    I'm trying to do something that I thought would be fairly simple (and it probably is?)

    All I want is a div with 100% height (of the body container), the body container and the html have already been set to 100% (of the document/browser page).
    My issue is that the header takes up a small amount of height (150px) and I cant see a way of setting a div to a height of 100%-150px.
    So I always have a fraction at the bottom of the page that is 150px more than 100% of the browser (you always have to scroll a little:

    basic page design:

    <!DOCTYPE html>
<html lang='en' >
	<head>
		<style type="text/css">html{height: 100%;}	body {height: 100%;}	</style>
	</head>
	<body>
		<!-- HEADER_BEGIN -->
		<div id="headerwrap" style ="
			margin-left: auto; 
			margin-right: auto;
			height: 150px;
			width: 1000px;
			">
		
			<header>
				<div style="
					height: 100%;	
					position: relative;	
					background-color: red;
					width: 1000px;
					">
				</div>
			</header>
		</div>
		
		<div style ="
			margin-left: auto; 
			margin-right: auto;
			height: 100%;
			background-color: blue;
			width: 1000px;
			">
		</div>				
	</body>
</html>
    Code (markup):
    I need 100% height for child div at some point
     
    Mike224, Jun 21, 2011 IP
  2. Mike224

    Mike224 Peon

    Messages:
    80
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Dont worry, I just re-arranged my divs so the 100% includes the header: 

    
<!DOCTYPE html>
<html lang='en' >
	<head>
		<style type="text/css">html{height: 100%;}	body {height: 100%;}	</style>
	</head>
	<body>
		<div id="wrapall" style ="
			margin-left: auto; 
			margin-right: auto;
			height: 100%;
			background-color: blue;
			width: 1000px;
			">
	
			<!-- HEADER_BEGIN -->
			<div id="headerwrap" style ="
				margin-left: auto; 
		 		margin-right: auto;
				height: 150px;
				width: 1000px;
				">
		
			<header>
				<div style="
					height: 100%;	
					position: relative;	
					background-color: red;
					width: 1000px;
					">
				</div>
			</header>
		
			</div>
		

		</div>				
	</body>
</html>
    Code (markup):
     
    Mike224, Jun 22, 2011 IP
  3. BRUm

    BRUm Well-Known Member

    Messages:
    3,086
    Likes Received:
    61
    Best Answers:
    1
    Trophy Points:
    100
    #3
    Last edited: Jun 25, 2011
    BRUm, Jun 25, 2011 IP