Basically #content is not obeying the height: auto attribute.
What am i doing wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title id="title" runat="server">AMIDS: Advanced Management Information Data Store</title>
<style type="text/css">
#container
{
background-color: White;
height: 100%;
min-height: 100%;
min-width: 600px;
width: 100%;
}
#header
{
height: 50px;
overflow: hidden;
width: 100%;
}
#headerLeft
{
background-image: url('/Amids/App_Themes/Default/Images/HeaderLeft.jpg');
float: left;
height: 50px;
width: 5px;
}
#headerCenter
{
background-image: url('/Amids/App_Themes/Default/Images/HeaderCenter.jpg');
float: left;
height: 50px;
width: 99.2%;
}
#headerRight
{
background-image: url('/Amids/App_Themes/Default/Images/HeaderRight.jpg');
float: left;
height: 50px;
width: 5px;
}
#menu
{
background-image: url('/Amids/App_Themes/Default/Images/Menu.jpg');
height: 20px;
width: 100%;
}
#content
{
background-color: Pink;
height: auto;
width: 100%;
}
#footer
{
height: 40px;
overflow: hidden;
width: 100%;
}
#footerLeft
{
background-image: url('/Amids/App_Themes/Default/Images/FooterLeft.jpg');
float: left;
height: 40px;
width: 5px;
}
#footerCenter
{
background-image: url('/Amids/App_Themes/Default/Images/FooterCenter.jpg');
float: left;
height: 40px;
width: 99.2%;
}
#footerRight
{
background-image: url('/Amids/App_Themes/Default/Images/FooterRight.jpg');
float: left;
height: 40px;
width: 5px;
}
* html #container
{
height: 100%;
}
*
{
margin: 0;
padding: 0;
}
html, body, form
{
border: none;
height: 100%;
}
</style>
</head>
<body>
<form id="form" runat="server">
<div id="container">
<div id="header">
<div id="headerLeft"></div>
<div id="headerCenter"></div>
<div id="headerRight"></div>
</div>
<div id="menu"></div>
<div id="content"></div>
<div id="footer">
<div id="footerLeft"></div>
<div id="footerCenter"></div>
<div id="footerRight"></div>
</div>
</div>
</form>
</body>
</html>
Any ideas anyone?
Auto is already the default value.
Block level elements don't stretch to fill the parent's height.
So, that div is not supposed to stretch - is it? (Maybe see height calculation for block level elements )
Which would mean is is obeying the height:auto
attribute.
Maybe you can do what you want using position: absolute; bottom: 10px;
position: absolute; bottom: 10px;
on the footer and some bottom-margin on the content.
Background might be tricky - maybe you can give "pink" background to all body, and white to the header and menu.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.