White Space on Bottom of Page

user_12904836 0
Viewed 52

I am creating a basic page layout with main content area and navbar using 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. Here is my code:

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

}
flexbox twitter-bootstrap css html
2 Answers

Try adding this CSS rule to your container!

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

The vh CSS unit makes the minimum height of the element relative to the viewport.

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.

user_17794330

set min-height to element e.g. : main tag min-height:100vh or add 

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