当我将高度更改为百分比值时，元素会折叠

Question

我正在研究我的第二个网络项目（自学），我有一个新手问题。

我的页面中有一个模拟页眉和页脚，其高度均为100px。 我试图改变这一点，以便高度以百分比表示但是当我这样做时它们会崩溃。 为什么？

码：

HTML

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>Photography</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
        <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
        <script type="text/javascript" src="JavaScript2b.js"></script>
        <script type="text/javascript" src="JavaScript2.js"></script>
    </head>

    <body>
        <div id="header">
        </div>
        <div id="wrap">
            <div id="container">
                <div id="controllers">
                    <div id="previous" class="buttons" onclick="change(-1);">
                    </div>
                    <div id="next" class="buttons" onclick="change(1);">
                    </div>
                </div>
                <div id="imagewrap">
                    <img src="Images/01PARANA/Image1.jpg" height="100%" id="front" />
                </div>
                <div>
                    <p id="tag">Poem</p>
                </div>
            </div>
        </div>
        <div id="footer">
        </div>
    </body>
    <script type="text/javascript" src="JavaScript2.js"></script>
</html>

CSS

@font-face {font-family: Eagle-Light;
                    src: url("Eagle-Light.otf") format("opentype");
                    }

@font-face {font-family: Raleway Light;
                    src: url("Raleway Light.otf") format("opentype");
                    }

body {
    margin: 0px;
    padding: 0px;
    height: 100%;
}

#header {
    position: relative;
    height: 100px;
    width: 100%;
    background-color: yellow;
}

#wrap {
    position: relative;
    clear: both;
    padding: 0px;
    width: 100%;
}

#footer {
    position: relative;
    height: 100px;
    width: 100%;
    background-color: lightgray;
    display: block;
}

#container {
    position: relative;
    margin: 15px auto;
}

#controllers {
    position: static;
    height: 20px;
}

#previous {
    position: absolute;
    left: 10px;
    background-image: url(Images/carremoins.png);
    background-repeat: no-repeat;
    background-position: center center;
    width: 20px;
    height: 20px;
    z-index: 4;

}

#next {
    background-image: url(Images/carreplus.png);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 10px;
    z-index: 4;
    background-position: center center;
}

#container:hover .buttons {
/*  display: block;*/
opacity: 1;
}

#tag {
    position: relative;
    height: 40px;
    line-height: 1.7em;
    padding-top: 5px;
    text-align: center;
    font-size: 1.1em;
}


.buttons {
    cursor: pointer;
    top: 50%;
    z-index: 3;
/*  display: none;*/
    opacity: 0;
    transition: opacity .3s ease-in-out;
}


#imagewrap{
    position: relative;
    border: 1px solid #818181;
    overflow: hidden;
    z-index: 2;
    height: 100vh;
}

#front {
    display: block;
}

p {
    color: #818181;
    font-family: Eagle-Light;
    line-height: 1.7em;
    padding: 0px;
    margin: 0px;
    font-size: 0.5em;
    letter-spacing: 0.21em;
}


a:link {
    text-decoration: none;
    color: inherit;
}

a:visited {
    text-decoration: none;
    color: inherit;
}

Answer 1

要使容器填满屏幕的高度，您可以尝试这样做：

html, body {
    height: 100%;
}

Answer 2

请尝试这样做：

#footer {
height: 10vh;
}

10vh =视口高度的10％

除了直接设置百分比之外，您还可以进行计算，例如通过执行以下操作使页脚的高度等于视口的高度减去800px：

#footer {
height: calc(100vh - 800px);
}