centem
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>
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;
}
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.