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

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 >
            <div >
                <li>About</li>
                <li>Shop</li>
            </div>
            <div >My Webpage</div>
            <div >
                <li>Sign In</li>
                <li>My Acount</li>
            </div>
        </div>

        <div >
            <div >
                <ul>
                    <li>Link 1</li>
                    <li>Link 2</li>
                    <li>Link 3</li>
                    <li>Link 4</li>
                    <li>Link 5</li>
                </ul>
            </div>
        
            <div >
                <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 >
            <div >
                <li>Settings</li>
            </div>
            <div >
                <li>Legal Info</li>
            </div>
    </body>

CodePudding user response：

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.