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 Well-Known Member

    Messages:
    80
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    100
    #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