?
Solved

Take up remaining space with div tag

Posted on 2014-03-13
3
Medium Priority
?
502 Views
Last Modified: 2014-04-07
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

0
Comment
Question by:centem
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 51

Expert Comment

by:Steve Bink
ID: 39928538
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.
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 39928548
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
0
 
LVL 14

Accepted Solution

by:
Pierre Cornelius earned 2000 total points
ID: 39977498
See following changes to your #content rule:
Remove: min-height: 80%;
add: height: calc(100% - 244px);

		#content {
			/*padding-bottom:100px; /* Height of the footer element */
			position: absolute;
			border: 1px solid black;
			max-width: 100%;
			/* remove this: min-height: 80%; */
			height: calc(100% - 244px); /* add this*/
			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;
		}

Open in new window

0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question