CSS - header - always bottom footer and 100% content_问答_开发者

CSS - header - always bottom footer and 100% content

开发者 https://www.devze.com 2023-02-08 20:29 出处：网络

<body> <div id=\"wrap\"> <div id=\"header\"> HEADER </div> <div id=\"inner-wrap\">

相关专题：css

<body> 
    <div id="wrap">
        <div id="header">
            HEADER
        </div>
        <div id="inner-wrap">
            <div id="content">
               CONTENT
            </div>
        </div>
        <div id="footer">
            FOTTER
        </div>
    </div> </body>

AND CSS:

html { height:100%; max-height:100%; }

body {
    margin:0;
    padding:0;
    height:100%;
    max-height: 100%;
}

#wrap {
    min-height:100%;
    height: 100%;
    position:relative;
}
* html #wrap { height:100% }

#inner-wrap {
    padding-bottom:50px;
    min-height: 100%;
}
#inner-wrap:after {
    content:" ";
  开发者_StackOverflow中文版  display:block;
    clear:both;

}
* html #inner-wrap {
    height:100%;
}

#header
{
    width: 100%;
    background-color: #C0C0C0;
    height: 16px;
    color: White;
    text-align: center;
    position: relative;
    top:0px;
}
#footer
{
    width: 100%;
    background-color: #C0C0C0;
    height: 50px;
    position:absolute;
    bottom: 0;
    color: White;
    text-align: center;
}
#content
{
    width: 1000px;
    height: 100%;
    background-color: #F5FDEC;  
    margin: 0 auto 0 auto;
}

The Problem:

How i can make this: HEADER top 16px, CONTENT dynamic 100% height, FOOTER at end of page

If i give 100% to inner-wrap DIV, them after footer is white space.

Thx

You have too many heights going on:

Remove the min-height and max-height values from your selectors.

Remove the position: absolute; from your #wrap div.

I made an example for you here.

For the footer positioned at the bottom in a fixed position that doesn't move when you scroll the webpage use this: