如何将div设置为完全响应高度。 （包括小提琴链接）

Question

我正在进行30/70设计，离开导航，右边是内容。当我加载页面时，它将高度设置为100％，但是当我滚动时，他不会更新其高度，结果是我看到了我的背景颜色而不是div背景颜色。我经历了几个类似的问题并尝试了，但随后我的导航爆炸了。

我有一个JS FIDDLE

* {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
    width: 100%;
}
#overzicht {
    height: 100%;
    width: 70%;
    float: right;
    background-color: #f7f7f7;
    z-index: 999;
}

#nav {
    height: auto;
    width: 30%;
    background-color: #2c3e50;
    float: left;
    text-align: center;
}

您可以在此处查看滚动时的结果，但不会更新高度。

Answer 1

将html, body设置为min-height: 100%，以便将身体拉伸到浏览器视口高度之外。

Updated JSfiddle

/* ------------------------------------------------------ */


/* MAIN FILE - MAP */


/* ------------------------------------------------------ */

* {
    margin: 0;
    padding: 0;
}
html,
body {
    min-height: 100%;
    width: 100%;
}
html {
    background-color: #2c3e50;
    font-family: 'Lato', 'Arial', sans-serif;
    color: #ecf0f1;
    font-size: 20px;
    font-weight: 300;
    text-rendering: optimizeLegibility;
}
p,
h1 {
    margin: 0;
    color: #95a5a6;
}
p {
    font-size: 80%;
}
#nav {
    height: auto;
    width: 30%;
    background-color: #2c3e50;
    float: left;
    text-align: center;
}
#nav p {
    margin: 0 10px;
}
#overzicht {
    height: 100%;
    width: 70%;
    float: right;
    background-color: #f7f7f7;
    z-index: 999;
}
#overzicht-instructies {
    height: 100%;
    width: 70%;
    float: right;
    background-color: #f7f7f7;
    z-index: 999;
    color: #000;
}
h1 {
    text-align: center;
    font-size: 120%;
    font-weight: 500;
    margin-bottom: 2%;
}
h2 {
    text-align: center;
    font-size: 120%;
    font-weight: 300;
    margin-bottom: 2%;
    margin-top: 5%;
    text-transform: uppercase;
    color: #414141;
}
h2:after {
    display: block;
    height: 2px;
    background-color: #e67e22;
    content: " ";
    width: 100px;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
}

/*-- NAV --*/

a:link,
a:visited {}
a:hover,
a:active {}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
    text-align: left;
}
.navi {
    display: block;
    width: 100%;
    height: 40px;
}
ul li a:link,
ul li a:visited {
    color: #ecf0f1;
    text-decoration: none;
    background-color: #2c3e50;
    padding-left: 30px;
    padding-top: 10px;
    border-bottom: 1px solid rgba(238, 238, 238, 0.28);
}
ul li a:hover,
ul li a:active {
    color: #ecf0f1;
    text-decoration: none;
    background-color: #34495e;
    border-left: 5px solid #2980b9;
}
.icons {
    margin-left: -15px;
    margin-right: 15px;
}
.current-page {
    color: #ecf0f1;
    text-decoration: none;
    background-color: #34495e;
    border-left: 5px solid #e67e22;
}
.current-page {
    color: #ecf0f1;
    text-decoration: none;
    background-color: #34495e;
    border-left: 5px solid #e67e22;
}

/*-- TABEL --*/

table {
    border: none;
    color: #fff;
}
tr {
    width: 4rem;
    height: 2rem;
    border: none;
    text-align: center;
}
th {
    width: 4rem;
    height: 2rem;
    border: none;
    text-align: center;
}

/*-- Tabelnamen --*/

th {
    background: #2980b9;
    border: none;
}

/*-- Tabeldata --*/

td {
    background: #3498db;
    border: none;
}
.section-tabel {
    text-align: center;
}

/*-- BUTTONS --*/

.btn:link,
.btn:visited {
    display: inline-block;
    padding: 10px 10px;
    text-align: center;
    font-size: 80%;
    font-weight: 300;
    text-decoration: none;
    background-color: #474D5A;
    border: 3px dashed #a2a7b7;
    color: #e6e6e6;
    transition: background-color 0.2s;
}
.btn:hover,
.btn:active {
    background-color: #474D5A;
    color: #00FA9A;
    border: 3px dashed #00FA9A;
}
.brenso {
    background-color: #3498db;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: -5px;
    color: #fff;
}
.slider {}
input[type=checkbox] + label {
    width: 50px;
    color: #ccc;
    font-style: italic;
}
input[type=checkbox]:checked + label {
    color: #00FA9A;
    font-style: normal;
}
.test {
    color: #2980b9;
}
.vandaag-context table {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.morgen-context table {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}
.morgen-context table a:link,
.morgen-context table a:visited {
    display: inline-block;
    vertical-align: top;
    width: auto;
    text-decoration: none;
    padding: 10px 10px;
    color: white;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    background: #f39c12;
    border: 0;
    border-bottom: 2px solid #d48506;
    cursor: pointer;
    -webkit-box-shadow: inset 0 -2px #d48506;
    box-shadow: inset 0 -2px #d48506;
}
.morgen-context table a:active {
    top: 1px;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
p {
    margin-left: 10%;
    margin-right: 10%;
}
.info {
    background-color: #fff;
    height: auto;
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
    border: 1px solid #eee;
}
.info p {
    padding-top: 5%;
    padding-bottom: 5%;
}
.rondje {
    color: #e67e22;
    border: 2px solid #e67e22;
    display: inline-block;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    text-align: center;
    padding: 5px;
    font-size: 100%;
    margin-right: 25px;
    margin-top: 25px;
    ;
}

<!DOCTYPE html>
<html lang="nl">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Webapp voor de werknemers van het bedrijf Brenso, om gemakkelijker hun bestemmingen visueel aan te kaarten en te voltooien.">

    <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
    <link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
    <link rel="stylesheet" type="text/css" href="vendors/css/animate.css">
    <link rel="stylesheet" type="text/css" href="recources/css/overzicht.css">
    <link rel="stylesheet" type="text/css" href="recources/css/queries.css">
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>

    <title>Brenso WebApp</title>

</head>

<body>
    <div id="nav">
        <div class="header-nav">
            <nav>
                <div class="row">
                    <h1 style="clear: both;" class="brenso">Brenso Geolocation</h1>
                    <ul>
                        <li>
                            <a class="navi" href="main.php"><i class="ion-map icons"></i>Kaart</a>
                        </li>
                        <li><a class="navi" href="overzicht.php"><i class="ion-ios-list icons"></i>Overzicht</a></li>
                        <li><a class="navi current-page" href="instructie.html"><i class="ion-help-circled icons"></i>Handleiding</a></li>
                        <li><a class="navi" href="index.html" onclick="return confirm('Ben je zeker dat je wilt uitloggen?')"><i class="ion-log-out icons"></i>Log uit</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <section id="overzicht-instructies" class="section-tabel">
        <div class="row">
            <h2>Algemene informatie</h2>
            <div class="info">
                <p>Deze applicatie is gemaakt voor het <strong>visualiseren van klantenafspraken</strong>. Het doel is om een duidelijk beeld te krijgen over wat je nog moet doen vandaag en daar interactief mee omgaan.</p>
            </div>

        </div>
        <div class="row">
            <h2>Stappenplan</h2>
            <div class="info">
                <div class="rondje">1</div>
                <p>Deze applicatie is gemaakt voor het <strong>visualiseren van klantenafspraken</strong>. Het doel is om een duidelijk beeld te krijgen over wat je nog moet doen vandaag en daar interactief mee omgaan.</p>
            </div>

        </div>
        <br>
        <div class="row">
            <div class="info">
                <div class="rondje">2</div>
                <p>Deze applicatie is gemaakt voor het <strong>visualiseren van klantenafspraken</strong>. Het doel is om een duidelijk beeld te krijgen over wat je nog moet doen vandaag en daar interactief mee omgaan.</p>
            </div>

        </div>
        <br>
        <div class="row">
            <div class="info">
                <div class="rondje">3</div>
                <p>Deze applicatie is gemaakt voor het <strong>visualiseren van klantenafspraken</strong>. Het doel is om een duidelijk beeld te krijgen over wat je nog moet doen vandaag en daar interactief mee omgaan.</p>
            </div>

        </div>
    </section>


</body>

</html>

Answer 2

问题在于，您body的固定height为100％。将高度定义替换为使用min-height: 100%，body至少是视口的高度，但如果文档的内容超过此高度，则body将展开以包含它。

html,
body {
    min-height: 100%;
    width: 100%;
}

Answer 3

尝试将#overzicht-instructies height:100%更新为min-height:100%

Answer 4

我评论了第52行（#overzicht-instructies {height: 100%;}），它似乎与我认为你想要它的方式有关。请参阅小提琴：http://jsfiddle.net/v2z8t5gf/1/

通过设置一个明确的高度，它相对于窗口大小（我特别想到'视口'，虽然我可能会弄错）。

我猜你设置了高度，因为你想确保两列都占据页面的整个高度，而不管每个列的内容有多少。这样做有点困难，但您可以设置最小高度值而不是高度值（html, body, .containerClass {min-height:100%;/*height:auto;*/}），并且它至少不会将容器的高度限制为窗口高度。