Solved

Take up remaining space with div tag

Posted on 2014-03-13
3
474 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 51

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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

762 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now