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

Question

我知道这是一个反复出现的问题，但我已经环顾四周，并且我理解它应该如何工作，或者我认为。目前我的身体为height:100%，html为min-height: 100%。如果我是正确的，百分比高度应该适用于我的直接父母是身体的#bigwrap。接下来，我在.container中有另一个名为#bigwrap的div，但是，每当我通过百分比增加.container的高度时，高度根本不会增加。我希望能够自由地增加身高。此代码段不包含实际高度。我实际上有#bigwrap之前的导航。我的另一个问题是，如果你在导航后将它放在div上，100％的高度是如何工作的，因为导航本身不会算作身体'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％。