asked on

Take up remaining space with div tag

I would like for my content div that has a background image to take up the remaining space between the footer and header tags. How can I do this please? Thank you.

<!DOCTYPE html>
<html charset="UTF-8">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test</title>
	<link rel="stylesheet" type="text/css" href="styles/styles.css" />	

	<!--[if lt IE 7]>
		<style type="text/css">
			#wrapper { height:100%; }
		</style>
	<![endif]-->
	
</head>

<body>

	<div id="wrapper">
		
		<div id="header">
		</div><!-- #header -->
		
		<div id="header-compact">
			<h3>Kevin</h3><strong><h2>Barlow</h2></strong>
		</div>
		
		<div id="content">
			<div id="name">
				<h1>Building Contractor</h1>
				<h3>Key West, Florida</h3>
			</div>
		</div><!-- #content -->
		
		<div id="footer">
		</div><!-- #footer -->
		
	</div><!-- #wrapper -->
	
</body>

</html>

Open in new window

html,
body {
	margin:0;
	padding:0;
	height:100%;
}
#wrapper {
	min-height:100%;
	width: 100%;
	position:relative;
}
#header {
	background:#000000;
	padding:10px;
	border-bottom: 2px solid red;
}
#header-compact{
	height: 100px;
	max-width: inherit;
}
h2{
	color: red;
}
#content {
	/*padding-bottom:100px; /* Height of the footer element */
	position: absolute;
	border: 1px solid black;
	max-width: 100%;
	min-height: 80%;
	background: url(S12_Blueprints.gif) no-repeat center center fixed;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#name{
	position: absolute;
	opacity: 0.5;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	background-color: black;
	color: white;
	margin-bottom: 50px;
}
#footer {
	background:#ffab62;
	width:100%;
	height:100px;
	position:absolute;
	bottom:0;
	left:0;
	border: 1px solid black;
}

Open in new window

Steve Bink

I think the only you could do this is through Javascript, by calculating the space left in the current viewport between your #header-compact and #footer. Your footer is essentially locked to the bottom of the viewport, and is removed from the flow.

You could try setting a min-height on #content, but without a specific height on #wrapper, you'll have no guarantees for different screen sizes.

Julian Hansen

Firstly I would change your css so that your footer sticks to the bottom of the page no matter how much content you have. (see attached)

Then - in terms of the content area filling the space to the footer - just need to understand the #name element - why is that positioned absolutely?
t604.css

ASKER CERTIFIED SOLUTION

Pierre Cornelius

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial