Solved

Take up remaining space with div tag

Posted on 2014-03-13
3
499 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 57

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 500 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

688 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