1

我有这个 HTML：（我希望标题是屏幕高度的 15%）直到 .header div 的整个 DOM 树都用高度百分比定义。但标题 div 的高度仅包含小于屏幕 15% 的内容。

<!DOCTYPE HTML>
<html>
  <head>
        <link rel="stylesheet" type="text/css" href="css/index.css">        
    <title> </title>

  </head>
  <body onload="pageLoad();">
    <div class="header">
    </div>

    <div id="TempDiv" style="visibility:hidden"></div>
    <div class="page-body"> </div>
    <div class="footer"> </div>
    <script> $(".footer").load("footer.html");</script>
  </body>
</html>

CSS是：

html {
    -webkit-touch-callout: none; 
    -webkit-text-size-adjust: none;
    -webkit-user-select: none; 
    background-color:black;
    background-image:url('../res/bg.png');
    background-size:100% 100%;
    background-repeat:no-repeat;
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-size:12px;
    width:100%;
    height:100%;
}

.body {
    width:100%;
    height:100%;
}

.header {
    /*position: absolute; - this change the height as desired but other DIVs get up to undesired position */
    margin-top:3%;
    height:15%;
}

.page-body {
    margin-top:3%;
    /*min-height:40%;*/
    /*border: solid thick white;*/
}

.about , .gallery, .events , .contact
{
    height:100%;
    width:100%;
    /*border: solid thick green;*/
    vertical-align:middle;
}

.footer {
    /*border: solid thick white;*/
    width:100%;
    height:auto;
    position: fixed;
    bottom:4%;
    text-align:center;
    }
4

2 回答 2

4

问题是你拼错了身体的css。您现在正在为不存在的 body 类设置 css。

/* Below was the problem */
body {
    width:100%;
    height:100%;
}
于 2013-08-19T21:05:51.487 回答
0

当我将 HTML 设置为 100% 并将 !important 设置为header时，我的代码有效；

html 
{
    width:100%;
    height:100%;
}

body 
{
    width:100%;
    height:100%;
}

.header
{
    15% !important;
}
于 2016-09-28T08:12:04.530 回答