body element doesn't have 100% height_问答_开发者

开发者 https://www.devze.com 2023-01-15 18:02 出处：网络

has anybody an idea, why the blue div isn\'t set to 100% ? I need the blue div at the top of he brown footer!!!

相关专题：css

has anybody an idea, why the blue div isn't set to 100% ? I need the blue div at the top of he brown footer!!!

<!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> 
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15"></meta> 
        <title></title> 

        <style type="text/css"> 
            html, body {
                height: 100%;
                width: 100%;
                padding: 0px;
                margin: 0px;
            }

            div#container {
                height: 100%;
                height: auto !important;
                min-height: 100%;
                margin-bottom: -50px;
            }

            div#header {
                height: 50px;
                background: #ba6f19;
            }

            div#body {
                overflow: hidden;                
                height: 100%;
                background-color: blue;
            }

            /* IE6 Fix */
            * html div#body {
                overflow: visible;
            }

            div#content {
                margin:0;                
            }

            div#footer-push {
                height: 50px;
开发者_C百科            }

            div#footer {
                height: 50px;
                background: #ba6f19;
            }


            /* --- CUSTOM START */

            .us{
                float:left;
                width: 100%;
                min-height:50px;
                min-width:50px;
                height:auto;
                cursor:pointer;
                text-align:center;
            }

            div.cal
            {
                width:14.28%;
                float:left;
                color:#fff;
                overflow:hidden;
                height:100%;
                min-height:100%;
                background-color: black;
            }

            div.cal_headline
            {
                padding-left:3px;
                position:relative;
                background-color:#000000;
                color:white;
                min-width:100px;
            }
        </style> 

    </head> 
    <body> 

        <div id="container"> 

            <div id="header"> 

            </div> 

            <div id="body"> 
                <div id="content"> 

d

                </div> 
            </div> 

            <div id="footer-push"></div> 
        </div> 

        <div id="footer"> 

        </div> 
    </body> 
</html>

thank you very much

For height percentages to work, the parent container needs a height. So in your case, simply remove height: auto !important; from your div#container so that it's height is simply 100%.

div#container {
    height: 100%;
    min-height: 100%;
    margin-bottom: -50px;
}

change your CSS like this

Add this style

body{
   background-color: blue;
}

Modify this style

div#body {
   overflow: hidden;                
    height: 100%;
}

This is my solution:

html, body {width:100%;height: 100%; padding: 0; margin: 0;} #container {position: relative; height: 100%; width: 100%; margin: 0 auto;}

        #header, #footer {height: 20px; background: #dad; position: absolute; left: 0; right: 0;}
        #header {top: 0;}
        #footer {bottom: 0;}

        #content {position: absolute; top: 20px; bottom: 20px; left: 0; right: 0; background: #ffc; overflow: auto;}


        .us{
            float:left;
            width: 100%;
            min-height:50px;
            min-width:50px;
            height:auto;
            cursor:pointer;
            text-align:center;
        }

        div.cal
        {
            width:14.28%;
            float:left;
            color:#fff;
            overflow:hidden;
            height:100%;
            min-height:100%;
            background-color: black;
        }

        div.cal_headline
        {
            padding-left:3px;
            position:relative;
            background-color:#000000;
            color:white;
            min-width:100px;
        }

    </style> 

    <!--[if lt IE 7]>
  <style type="text/css" media="screen">
  body {text-align: center;}
  #header, #footer, #content {width: 100%;}
  #content {
  text-align: left;
  height: expression(document.body.offsetHeight - 40 + "px");
  }
  </style>
  <![endif]--> 


</head> 
<body> 
    <div id="container"> 
        <div id="header">header</div> 
        <div id="content"> 




        </div> 
        <div id="footer">footer</div> 
    </div> 
</body>