Question

有没有人知道，为什么蓝色div没有设置为100％？我需要在棕色页脚顶部的蓝色div！

<!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;
            }

            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>

非常感谢

Answer 1

要使高度百分比起作用，父容器需要一个高度。因此，在您的情况下，只需从div＃容器中删除height: auto !important;，使其高度仅为100％。

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

Answer 2

像这样改变你的CSS

添加此款式

body{
   background-color: blue;
}

修改此风格

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

Answer 3

这是我的解决方案：

html，body {width：100％; height：100％;填充：0;保证金：0;} #container {position：relative;身高：100％;宽度：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>

body元素没有100％的高度

3 个答案: