如何在Flexbox布局中确保容器及子元素占满高度？

问题诊断 #

你的代码核心问题是**.container没有设置display: flex**，导致它的flex-direction: column和flex:1完全不生效——只有flex容器的子元素才能使用flex属性。除此之外，用height:100vh给html/body设置高度会导致内容超出视口时页面被截断，应该改用min-height:100vh。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html, body{
            margin: 0;
            /* 移除固定height，避免内容溢出时截断 */
        }
        .container{
            display: flex; /* 关键：将容器转为flex容器 */
            flex-direction: column;
            min-height: 100vh; /* 让容器至少占满视口高度 */
        }
        .header{
            display:flex;
            background-color: #333;
            justify-content: center;
            color:white;
            padding: 20px;
            align-items: center;
        }
        .main{
            display:flex;
            flex:1; /* 让main区域占据header和footer之外的所有空间 */
        }
        .sidebar{
            display:flex;
            flex-direction: column;
            background-color: #f4f4f4;
            padding: 20px;
            flex: 0 0 200px; /* 固定宽度，不收缩不扩展 */
        }
        .title{
            display:flex;
            flex-direction: column;
            border:1px solid white;
            padding: 20px;
            margin:20px;
            flex:1;
            box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.1);
        }
            
        .main-contents{
            display:flex;
            flex-direction: column;
            flex:1; /* 让主内容区占据main的剩余空间 */
            overflow-y: auto; /* 内容过多时可滚动 */
        }
        .footer{
            display:flex;
            background-color: #333;
            justify-content: center;
            color:white;
            padding: 10px;
            /* footer会自动固定在底部，因为container是flex column布局，main占了剩余空间 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>My Blog</h1>
        </div>
        <div class="main">
            <div class="sidebar">
                <h2>About me</h2>
                <P>Some information about me.</P>
                <h2>Categories</h2>
                <ul>
                <li>Category 1</li>
                <li>Category 2</li>
                <li>Category 3</li>
                </ul>
            </div>
            <div class="main-contents">
                <div class="title">
                    <h2>Post Title 1</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel tortor facilisis, aliquet lacus a, pharetra quam.</p>
                </div>
                <div class="title">
                <h2>Post Title 2</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel tortor facilisis, aliquet lacus a, pharetra quam.</p>
                </div>
                <div class="title">
                <h2>Post Title 3</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel tortor facilisis, aliquet lacus a, pharetra quam.</p>
                </div>
            </div>
        </div>
        <div class="footer">
            <p>Footer Content</p>
        </div>
    </div>
</body>
</html>

关键修改说明 #

1. .container添加display: flex：这是让整个布局生效的核心，只有flex容器的子元素（header、main、footer）才能响应flex属性。
2. .container设置min-height:100vh：确保页面至少占满视口高度，当内容超过视口时，容器会自动扩展，避免截断内容。
3. 移除html/body的height:100vh：改用容器的min-height，防止内容溢出时页面被截断。
4. .sidebar改用flex:0 0 200px：明确固定侧边栏宽度，不随容器收缩或扩展，比单独用flex-basis更稳妥。
5. .main-contents添加overflow-y:auto：当主内容过多时，会出现垂直滚动条，保证footer始终在页面底部。

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