身體元素沒有100％的高度

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

為了使高度百分比起作用，父容器需要一個高度。 因此，根據您的情況，只需除去height: auto !important; 從div＃container中移出，使其高度僅為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，正文{width：100％; height：100％; 填充：0; margin：0;} #container {位置：相對; 高度：100％; 寬度：100％; 保證金：0自動；}

        #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>

身體元素沒有100％的高度

問題描述

3 個解決方案

解決方案1
3 已采納 2010-09-09 16:43:35

解決方案2
0 2010-09-09 16:42:16

解決方案3
0 2010-09-09 17:02:39

身體元素沒有100％的高度

問題描述

3 個解決方案

解決方案1 3 已采納 2010-09-09 16:43:35

解決方案2 0 2010-09-09 16:42:16

解決方案3 0 2010-09-09 17:02:39

解決方案1
3 已采納 2010-09-09 16:43:35

解決方案2
0 2010-09-09 16:42:16

解決方案3
0 2010-09-09 17:02:39