How to prevent vertical overflow when using justify-content: space-between for header and footer positioning?

Debora Sanchez 0
Viewed 22

total newb here. I am making a webpage with HTML and CSS to practice using Flexbox. I am trying to position the footer at the bottom of the page. I am changing the flex-direction to column, then adding justify-content: space-between. Theoretically, this produces the desired effect but leaves overflow. And using overflow: hidden, cuts off the bottom half of my words.

body {
    height: 100vh;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.header {
    display: flex;
    justify-content: space-between;
}

.right-side {
    display: flex;
    list-style: none; 
    gap: 10px;

}

.left-side {
    display: flex;
    list-style: none;
    gap: 10px;
}

.footer {
    display: flex;
    justify-content: space-between;
}
<body>
        <div class="header">
            <div class="left-side">
                <li>About</li>
                <li>Shop</li>
            </div>
            <div class="title">My Webpage</div>
            <div class="right-side">
                <li>Sign In</li>
                <li>My Acount</li>
            </div>
        </div>

        <div class="container">
            <div class="sidebar-content">
                <ul>
                    <li>Link 1</li>
                    <li>Link 2</li>
                    <li>Link 3</li>
                    <li>Link 4</li>
                    <li>Link 5</li>
                </ul>
            </div>
        
            <div class="main-content">
                <ul>
                    <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                    <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                    <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                    <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                    <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                </ul>
            </div>
        </div>
        <div class="footer">
            <div class="left-side">
                <li>Settings</li>
            </div>
            <div class="right-side">
                <li>Legal Info</li>
            </div>
    </body>

flexbox css html
1 Answers

It is because you have margin or padding that adds more space.

Always is common practice when you start working in CSS to reset it to all elements.

* {
  margin: 0;
  padding: 0;
}

Of course, it always is the best to set it on top of CSS file, so you can easily later apply new margin and padding to any element.

Nemanja29120
Related