使用justify-content:space-between定位页头页脚时，如何避免垂直溢出？

问题根源 #

你遇到的垂直溢出和内容截断问题，主要来自两个点：

• 浏览器默认给body添加了margin，当你设置height:100vh后，默认边距会让body总高度超过视口高度，触发滚动条。
• 固定height:100vh会强制限制页面高度，一旦中间内容过多，就会超出容器范围，要么溢出要么被截断。

修复方案 #

只需要调整3处代码，就能实现内容少时光棍Footer贴底，内容多时页面滚动Footer跟随底部的效果：

1. 重置默认样式：去掉html和body的默认边距，避免额外高度影响
2. 改用最小高度：把body的height:100vh换成min-height:100vh，允许页面随内容自动延伸
3. 让中间区域填充空间：给.container添加flex:1，让它占据header和footer之外的所有剩余空间

修改后的完整代码 #

CSS部分

html, body {
    margin: 0;
    padding: 0;
}

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

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

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

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

.container {
    flex: 1;
    padding: 10px;
    display: flex;
    gap: 20px;
}

.footer {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

HTML部分（修正语义化问题）

<body>
    <div class="header">
        <ul class="left-side">
            <li>About</li>
            <li>Shop</li>
        </ul>
        <div class="title">My Webpage</div>
        <ul class="right-side">
            <li>Sign In</li>
            <li>My Account</li>
        </ul>
    </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">
        <ul class="left-side">
            <li>Settings</li>
        </ul>
        <ul class="right-side">
            <li>Legal Info</li>
        </ul>
    </div>
</body>

额外提示 #

原来的HTML里li直接放在div里不符合语义规范，li必须是ul或ol的子元素，上面的代码已经修正了这个问题；给各容器加少量内边距，能避免内容贴在页面边缘，提升浏览体验。

内容的提问来源于stack exchange，提问作者Debora Sanchez