I'm facing a challenge with CSS as I work on adapting a website. I need to create a layout that includes a container_div beneath the body element, both set to 100% height. The header should be 170px tall, followed by a content div that stretches from the bottom of the header to the top of the footer. The footer itself should have a fixed height of 50px.
Within the content div, there will be left and right divs positioned relative with floating properties applied. I want a design similar to an example found at this link, but with overflow hidden for the content area using a custom scrollbar script.
The part I'm struggling with is making the content div dynamically adjust its height based on the remaining space between the header and footer. Adding a background to the container creates visibility issues with transparent elements like the header and footer.
If anyone can provide guidance or a template for achieving this structure, it would greatly help. Specific advice on styling the content div alone would also be appreciated.
EDIT:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>stretchy footer</TITLE>
<LINK rel="stylesheet" type="text/css" href="index.css" />
</HEAD>
<BODY>
<DIV id="container">
<DIV id="header">
<IMG src="./image/header2.png">
</DIV>
<DIV id="left">
<DIV id="content">
This is the div which needs to be stretched between header and footer.
</DIV>
test<BR>
test<BR>
test<BR>
test<BR>
test<BR>
</DIV>
<DIV id="right">
t
</DIV>
</DIV>
</BODY>
</HTML>
CSS style:
/* General */
* { margin: 0; padding: 0; border-style: none;}
*:hover, *:active, *:focus {
outline: 0;
}
html {
filter: expression(document.execCommand("BackgroundImageCache", false, true));
line-height: 1;
-moz-user-select: none;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
-webkit-min-device-pixel-ratio:0;
height: 100%;}
body {height: 100%;} /* safe crossbrowser font */
a {text-decoration: none; outline: none;}
a:active {
border: none;
outline: none;}
.imagewrapper img {
display: inline-block;
width:100%;
-ms-interpolation-mode:bicubic;
image-rendering:-webkit-optimize-contrast;
image-rendering:-moz-crisp-edges;
image-rendering: optimizeQuality;
zoom:1; *display: inline;}
/* End General */
.clear {
clear: both;
}
#container {
height: 100%;
width: 1018px;
margin: 0em auto -10em auto;
position: relative;}
#left {
display: inline-block;
float: left;
height: 100%;
width: 950px;
padding: 0em 2em 0em 1em;
border: 1px solid brown;
background: url(./image/main.png);
}
#left p {
text-align: justify;}
#right {
float: right;
width: 14px;
border: 1px solid red;
}