页面底部的空白区域

Question

I am creating a basic page layout with main content area and navbar using Flexbox.我正在使用 Flexbox 创建一个带有主要内容区域和导航栏的基本页面布局。 For some reason, my main container will not take up the full space of the page, and instead just wraps around the content inside of itself.出于某种原因，我的主容器不会占据页面的全部空间，而只是将内容包裹在其内部。 On larger size viewports, the main container has a bunch of white space below it.在较大尺寸的视口上，主容器下方有一堆空白。 I have tried everything I could think of, including setting the height of all containers to 100%, and nothing seems to work.我已经尝试了所有我能想到的方法，包括将所有容器的高度设置为 100%，但似乎没有任何效果。 Here is my code:这是我的代码：

HTML: 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: 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%;
    }

}

Answer 1

Try adding this CSS rule to your container!尝试将此 CSS 规则添加到您的容器中！

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

The vh CSS unit makes the minimum height of the element relative to the viewport . vh CSS 单元使元素相对于视口的最小高度。

An unqualified % unit means height relative to the parent container, and if the behaviour of the parent container is dependent on it's contents (like the <body> element, by default) then setting 100% won't give the results you want. 未限定的%单位表示相对于父容器的高度，如果父容器的行为取决于它的内容（例如<body>元素，默认情况下），则设置 100% 不会给出您想要的结果。

Answer 2

set min-height to element eg : main tag min-height:100vh or add将 min-height 设置为元素，例如： main标签min-height:100vh或添加

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

页面底部的空白区域

问题描述

2 个解决方案

解决方案1
3 2020-03-15 23:48:08

解决方案2
2 已采纳 2020-03-16 00:00:32

页面底部的空白区域

问题描述

2 个解决方案

解决方案1 3 2020-03-15 23:48:08

解决方案2 2 已采纳 2020-03-16 00:00:32

解决方案1
3 2020-03-15 23:48:08

解决方案2
2 已采纳 2020-03-16 00:00:32