为什么组件在使用100vh作为高度后没有拉伸到网页的高度

Question

我想拉伸组件以占据网页的整个高度，但即使将高度设置为 100vh 和 100%，它也无法正常工作我该怎么做才能使它正常工作？

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    background-color: #428992;
    font-size: 62.5%;
    font-family: "Inter", sans-serif;
    height: 100%;
    /* display: flex;
    justify-content: center;
    align-items: center; */
}

.container {
    background-color: #fff;
    /* min-width: 750px; */
    border-radius: 10px;
    box-shadow: 0 5px 10px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* height: 100vh; */
    /* height: 100%; */
}

.heading,
.subscription,
.activities {
    padding: 30px;
}

.heading p {
    font-size: 1rem;
    line-height: 1.5;
    color: #818181;
}

.sub-heading {
    color: #cfde7a;
    font-size: 1rem;
    margin-bottom: 10px;
}

h1 {
    color: #49bebd;
    font-size: 2rem;
    margin-bottom: 10px;
}

div.subscription {
    background-color: #2bb4b1;
    color: #fff;
}

p {
    font-size: 1.6rem;
}

.subscription h3 {
    font-size: 1rem;
    margin-bottom: 10px;
}

.dollar {
    font-size: 2rem;
    color: #fff;
}

.price {
    font-size: 1rem;
    opacity: 0.7;
    margin-bottom: 10px;
}

.access {
    font-size: 1.2rem;
    margin-bottom: 10px;
    opacity: 0.8;
}

button {
    background-color: #cfde7a;
    border-radius: 5px;
    font-size: 1.4rem;
    font-weight: 500;
    color: #fff;
    padding: 10px 2px;
    width: 100%;
    box-shadow: 0 5px 10px 10px rgba(0, 0, 0, 0.1);
    border: none;
    margin-top: 10px;
}

div.activities {
    background-color: #49bebd;
    color: #fff;
}

.activities h2 {
    font-size: 1rem;
    margin-bottom: 10px;
}

ul {
    list-style-type: none;
    opacity: 0.7;
    font-size: 0.7rem;
}

ul li {
    line-height: 22px;
}

.price-grid {
    display: flex;
}

.price-grid>div {
    flex: 1;
}

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

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Single Price Grid Component</title>
</head>

<body>
    <div class="container">
        <!-- Heading Section Starts Here-->
        <div class="heading">
            <h1>Join our community</h1>
            <h2 class="sub-heading">30-day, hassle free money back guarantee</h2>
            <p>
                Gain access to our full library of tutorials along with expert code reviews.
            </p>
            <p>Perfect for any developers who are serious about honing skills.</p>
        </div>

        <!-- Price Grid Section Starts Here -->
        <div class="price-grid">
            <!-- Subscription Section Starts Here-->
            <div class="subscription">
                <h3>Monthly Subscription</h3>
                <p class="price"><span class="dollar">&dollar;29</span> per month</p>
                <p class="access">Full access for less than &dollar;1 a day</p>
                <p>
                    <button>Sign Up</button>
                </p>
            </div>

            <!-- Activities Section Starts Here-->
            <div class="activities">
                <h2>Why Us</h2>
                <ul>
                    <li>Tutorials by industry experts</li>
                    <li>Peer &amp; expert code review</li>
                    <li>Coding exercises</li>
                    <li>Access to our GitHub repos</li>
                    <li>Community forum</li>
                    <li>Flashcards decks</li>
                    <li>New videos every week</li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>

我想拉伸组件以占据网页的整个高度，但即使将高度设置为 100vh 和 100%，它也无法正常工作我该怎么做才能使它正常工作？

Answer 1

将 100vh 高度添加到要拉伸的 body 和 div。 100% 不适用于高度

为什么组件在使用100vh作为高度后没有拉伸到网页的高度

Why is the component not stretching to the height of the web page after using 100vh as the height

html

css

height