Full height CSS column
I have the following HTML to build a 900 pixel wide, centered page, with a header, footer and content section:
<body>
<div id="mainMaster">
<div id="main">
<form runat="server">
<div id="header">
</div>
<div id="content">
</div>
</form>
</div>
</div>
<div id="footer">
</div>
</body>
The layout is styled with the following (approx) CSS:
html, body
{
height: 100%;
}
#mainMaster
{
min-height: 100%;
background: url(../Images/Background.png);
}
#main
{
width: 930px;
margin: 0 auto;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#header
{
}
#footer
{
background-image:none;
background-color:White;
position: relative;
margin-top: -80px; /* negative value of footer height */
margin-left: auto;
margin-right: auto;
width: 930px;
height: 80px;
clear: both;
}
#content
{
position:relative;
overflow开发者_StackOverflow中文版:hidden;
height:100%;
background-image:none;
background-color:White;
}
The CSS was originally based on a layout I found on the internet for 'sticky footers'. It worked perfectly with a sticky footer, but then I came across these problems:
1) The 'content' is never stretched to full size. This is a big problem on some of my pages because internal controls are set to a height of 100%. Since content isn't stretched, the controls show up all squeeshed.
2) I just added a background image and colour. This background should not show up in the middle content panes. Because the 'content' isn't fully stretched I get the background image showing in the wrong places.
I prefer a CSS only fix for this (ie. no hacks or JS). Any help?
I would expect removing the #mainMaster <div> and moving its background image into #main's CSS would sort your problem out:
<body>
<div id="main">
<form runat="server">
<div id="header"></div>
<div id="content"></div>
</form>
</div>
<div id="footer"></div>
</body>
The problem you're running into is that #main's parent (#mainMaster) doesn't have an explicit height declared. Percentage heights only work properly when the elements parent has a height defined.
Try using min-height CSS property to set a minimum height for your content.
Adding a specific background color to #content and #header should prevent the background image from displaying in those areas. Not sure why the content isn't filling up the area, when you say "stretched" do you mean to a height of 100%? Browsers won't recognize a height of 100% without using js.
加载中,请稍侯......
精彩评论