Div 容器高度百分比不起作用

Question

我知道这是一个反复出现的问题，但我已经环顾四周，我明白它应该如何工作，或者我认为是这样。目前我有 body 的 height:100% 和 html 的 min-height: 100%。如果我是正确的，百分比高度应该适用于我拥有的#bigwrap，它的直接 parent 是 body。之后，我在 #bigwrap 中有另一个名为 .container 的 div，但是，每当我通过百分比增加 .container 的高度时，高度根本不会增加。我希望能够自由增加高度。此代码段未涵盖实际高度。我实际上有一个导航位于 #bigwrap 之前。我的另一个问题是，如果在导航后将它放在 div 上，100% 高度如何工作，因为导航本身不会算作 body 的“100%”高度的一部分？此外，该问题同时出现在移动设备和台式机上。对于移动设备，它始终是屏幕的剩余高度，例如，我无法将其缩小到 60% 高度。

* {
    margin: 0;
}

body {
    height: 100%;
    background-color: green;
}

html {
    min-height: 100%;
}

#bigwrap {
    position: relative;
    height: 70%;;
}

.container {
    display: flex; //
    position: absolute;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    width: 70%;
    margin: auto; //
    top: 40%; //
    left: 50%; //
    transform: translate(-50%, -50%);
    background-color: white;
}

.left, .middle, .right {
    border-right: 1px solid blue;
}

.left {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: space-around;
    order: 1; //
    background: red;
    flex: 1 20%;
    height: 100%;
}

.left img {
    max-width: 100%;
}

.middle {
    display: flex;
    flex-flow: column wrap;
    order: 2; //
    background: green;
    flex: 2 20%;
    height: 100%;
}

.right {
    text-align: center;
    order: 3; //
    background: yellow;
    flex: 1 20%;
    height: 100%;
}

.right .headbox {
    border-bottom: 1px solid orange;
    margin: auto;
    width: 60%;
    height: auto;
}

.right .list {
    text-align: center;
    margin: auto;
    width: 60%;
    height: auto;
}

.list ul {
    list-style: none;
    padding: 0;
}

.list a {
    text-decoration: none;
    color: inherit;
}

.headbox h3 {
    color: orange;
}

@media all and (max-width: 500px) {
    .container {
        flex-flow: row wrap;
        height: 100%;
    }
    .left img {
        height: 80px;
        width: 80px;
    }
    .left, .right, .middle {
        flex: 1 100%;
    }
    div.logo {
        margin: 0 auto;
        width: 30%;
        height: auto;
        text-align: center;
    }
    * {
        margin: 0;
    }
    #bigwrap {
        position: relative;
        height: 100%;
    }
    .container {
        display: flex; //
        position: absolute;
        position: relative;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        height: 60%;
        width: 70%;
        margin: auto;
        background-color: white;
    }
    .left, .middle, .right {
        border-right: 1px solid blue;
    }
    .left {
        display: flex;
        flex-flow: column wrap;
        align-items: center;
        justify-content: space-around;
        order: 1; //
        background: red;
        flex: 1 20%;
        height: 100%;
    }
    .left img {
        max-width: 100%;
    }
    .middle {
        display: flex;
        flex-flow: column wrap;
        order: 2; //
        background: green;
        flex: 2 20%;
        height: 100%;
    }
    .right {
        text-align: center;
        order: 3;
        flex: 1 20%;
        height: 100%;
    }
    .right .headbox {
        border-bottom: 1px solid orange;
        margin: auto;
        width: 60%;
        height: auto;
    }
    .right .list {
        text-align: center;
        margin: auto;
        width: 60%;
        height: auto;
    }
    .list ul {
        list-style: none;
        padding: 0;
    }
    .list a {
        text-decoration: none;
        color: inherit;
    }
    .headbox h3 {
        color: orange;
    }
    @media all and (max-width: 500px) {
        .box img {
            max-width: 100%;
            margin-bottom: 9%;
        }
        .container {
            flex-flow: row wrap;
            height: 100%;
        }
        .left img {
            height: 80px;
            width: 80px;
        }
        .left, .right, .middle {
            flex: 1 100%;
        }
    }
}

<div id="bigwrap">

    <div class="container">
        <div class="left">
            <img src="cat1.jpeg" alt="Picture of kid" />
            <img src="cat1.jpeg" alt="Picture of kid" />
        </div>
        <div class="middle">
            <div class="box">
                <p>Sample text. Sample text. Sample text. Sample
                    text. Sample text. Sample text. Sample text.
                    Sample text. Sample text. Sample text. Sample
                    text. Sample text. Sample text. Sample text.
                    Sample text. Sample text. Sample text. Sample
                    text.</p>
            </div>
            <div class="box">
                <p>Sample text. Sample text. Sample text. Sample
                    text. Sample text. Sample text. Sample text.
                    Sample text. Sample text. Sample text. Sample
                    text. Sample text. Sample text. Sample text.
                    Sample text. Sample text. Sample text. Sample
                    text.</p>
            </div>
            <div class="box">
                <p>Sample text. Sample text. Sample text. Sample
                    text. Sample text. Sample text. Sample text.
                    Sample text. Sample text. Sample text. Sample
                    text. Sample text. Sample text. Sample text.
                    Sample text. Sample text. Sample text. Sample
                    text.</p>
            </div>
        </div>

        <div class="right">
            <div class="headbox">
                <h3>Visit Us</h3>
            </div>
            <div class="list">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Hours</a></li>
                    <li><a href="#">Plan</a></li>
                    <li><a href="#">Directions</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Answer 1

#bigwrap {
    position: relative;
    height: 70%;; //only need one semi-colon
}

高度有两个分号。但它仍然可能不起作用。所以如果它不起作用，试试这个：

body, html {
   height: 100%;
}

最小高度和高度，或者只是高度需要设置为100%。

Div 容器高度百分比不起作用

Div container height percentage not working

html

css

height