Solved

Take up remaining space with div tag

Posted on 2014-03-13
3
489 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
3 Comments
 
LVL 50

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 54

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How can I increase the size of this logo 5 35
Width of Page is Affecting Side Menu 6 25
Javascript_Set_dropdown_value 7 32
Outlook opens HTML email as text 4 22
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

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