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

【问题标题】：Why is the component not stretching to the height of the web page after using 100vh as the height为什么使用100vh作为高度后组件没有拉伸到网页的高度
【发布时间】：2022-01-26 19:57:18
【问题描述】：

我想拉伸组件以占据网页的整个高度，但即使将高度设置为 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% 后它也无法正常工作我该怎么做才能做到这一点？

【问题讨论】：

哪个组件？请更具体
请发布 HTML 和 CSS。另外请不要截图屏幕，你可以按ALT+Print screen截图，打开mspaint然后按CTRL+V

标签： html css height

【解决方案1】：

为要拉伸的主体和 div 添加 100vh 高度。 100% 对高度不起作用

【讨论】：