Full height CSS column_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-08 19:12 出处：网络

I have the following HTML to build a 900 pixel wide, centered page, with a header, footer and content section:

相关专题：css

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.