页面底部的空白答案

【问题标题】：White Space on Bottom of Page页面底部的空白
【发布时间】：2020-06-27 03:20:43
【问题描述】：

我正在使用 Flexbox 创建包含主要内容区域和导航栏的基本页面布局。出于某种原因，我的主容器不会占用页面的全部空间，而只是将内容包裹在其自身内部。在较大尺寸的视口上，主容器下方有一堆空白区域。我已经尝试了我能想到的一切，包括将所有容器的高度设置为 100%，但似乎没有任何效果。这是我的代码：

HTML：

<body id="page3">
    <nav class="navbar">
        <div class="navbar-nav">
            <a href="#" class="nav-item">
                <i class="fas fa-home nav-icon"></i>
                <span class="link-text">Home</span>
            </a>
        </div>
        <div class="navbar-nav">
            <a href="#" class="nav-item">
                <i class="fas fa-user nav-icon"></i>
                <span class="link-text">About Me!</span>
            </a>
        </div>
        <div class="navbar-nav">
            <a href="#" class="nav-item">
                <i class="fas fa-book-open nav-icon"></i>
                <span class="link-text">Portfolio</span>
            </a>
        </div>
        <div class="navbar-nav">
            <a href="#" class="nav-item">
                <i class="fas fa-id-card nav-icon"></i>
                <span class="link-text">Contact Me</span>
            </a>
        </div>
    </nav>
    <main>
        <div class="contentContainer">
            <h1 class="contentHeader">CIS 111</h1>
            <aside class="contentAside">Intro to HTML5</aside>
            <p class="contentMain">lorem ipsum blah blah blah blah blah blah blah</p>
        </div>
        <div class="contentContainer">
            <h1 class="contentHeader">CIS 146</h1>
            <aside class="contentAside">Intro to Programming</aside>
            <p class="contentMain">lorem ipsum blah blah blah blah blah blah blah</p>
        </div>
        <div class="contentContainer">
            <h1 class="contentHeader">CIS 114</h1>
            <aside class="contentAside">Frontend Development</aside>
            <p class="contentMain">lorem ipsum blah blah blah blah blah blah blah</p>
        </div>
        <div class="contentContainer">
            <h1 class="contentHeader">CIS 130</h1>
            <aside class="contentAside">Responsive Web Design</aside>
            <p class="contentMain">lorem ipsum blah blah blah blah blah blah blah</p>
        </div>
        <div class="contentContainer">
            <h1 class="contentHeader">CIS 126</h1>
            <aside class="contentAside">DBMS/SQL</aside>
            <p class="contentMain">lorem ipsum blah blah blah blah blah blah blah</p>
        </div>
    </main>
</body>

CSS：

#page3 body {
    font-size: 16px;
}

#page3 .contentAside{
    color: #FE51E9;
    font-family: 'Baloo Thambi 2', cursive;
}

#page3 .contentContainer{
    background-color:#717171;
    border-radius: 5px;
    margin:10px;
    padding: 10px;
}

#page3 .contentHeader {
    color: white;
    font-family: 'Merriweather', serif;
    font-weight: 700;
}

#page3 .contentMain {
    color: white;
    font-family: 'Baloo Thambi 2', cursive;
}

#page3 main {
    display: flex;
    flex-direction: column;
    margin-bottom: 5rem;
    background-color: #C2C2C2;
}

#page3 .navbar {
    bottom: 0;
    height: 5rem;
    width: 100%;
    position: fixed;
    background-color: #323232;
    transition: 300ms ease;
}

#page3 .navbar:hover {
    height: 16rem;
}

#page3 .navbar:hover .link-text {
    display: block;
}

#page3 .link-text:hover {
    color: #FE51E9;
}

#page3 a:hover {
    text-decoration: none;
}


#page3 .link-text {
    display: flex;
    flex-direction: column;
    color: white;
    display: none;
}

#page3 .nav-icon {
    color: #FE51E9;
}

#page3 .navbar-nav {
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
}

@media(min-width: 768px) {
    #page3 main {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        margin-bottom: 0;
        margin-left: 5rem;
    }

    #page3 .navbar {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 5rem;
        position: fixed;
        background-color: #323232;
        transition: 300ms ease;
        justify-content: space-around;
    }

    #page3 .navbar:hover {
        width: 16rem;
        height: 100%;
    }

}

【问题讨论】：

标签： html css twitter-bootstrap flexbox

【解决方案1】：

尝试将此 CSS 规则添加到您的容器中！

#page3 .contentContainer {
   min-height: 100vh;
}

vh CSS 单元使元素相对于viewport 的最小高度。

An unqualified % 单位表示相对于父容器的高度，如果父容器的行为取决于它的内容（如 <body> 元素，默认情况下），那么设置 100% 不会给出结果想要。

【讨论】：

这行得通，但不是让主容器占据整个页面，而是我的 contentContainers 现在太大了并且被拉长了。有没有办法让主容器占据整个页面而不影响其子容器的大小？

【解决方案2】：

将最小高度设置为元素，例如：main 标签 min-height:100vh 或添加

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

【讨论】：

只需将 min-height: 100vh 添加到我的主体中就可以满足我的需要！出于某种原因，我试图将该属性与其他属性结合起来以使其正常工作，我不认为只是将其添加到主属性中。谢谢！！