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