当我将它们的高度更改为百分比值时元素崩溃答案

【问题标题】：Elements collapsing when I change their height to percentage values当我将它们的高度更改为百分比值时元素崩溃
【发布时间】：2017-07-12 08:25:25
【问题描述】：

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

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

代码：

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

【问题讨论】：

您可以使用 vh 以百分比设置高度。
stackoverflow.com/a/31728799/3597276 阅读此文，我认为它会有所帮助。
好的，所以我必须专门设置容器的高度。但是，如果我希望容器填充窗口的高度（无论窗口有多大或多小）并且页脚始终是该高度的 10%，该怎么办。可以这样做吗？
vh - 相对于视口高度的 1%* w3schools.com/cssref/css_units.asp

标签： html css height percentage collapse

【解决方案1】：

要让容器填满屏幕的高度，你可以试试这个：

html, body {
    height: 100%;
}

【讨论】：

我已经尝试过了，但我仍然得到滚动条。无论内容如何，让身体填满整个高度的最简单方法是什么？
如果出现滚动条，则表示某些内容有边距。边距添加到总高度。解决方法：设置margin: 0，或者使用calc(100% - 16px)作为高度（假设上下边距均为8px）。

【解决方案2】：

请尝试这样做：

#footer {
height: 10vh;
}

10vh = 视口高度的 10%

除了直接设置百分比之外，还可以进行计算，比如让footer的高度等于viewport的高度减去800px，这样就可以了：

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

【讨论】：