如何让容器占满content区块剩余高度？非Flex方案咨询

一、问题背景 #

1. HTML结构 #

<body>
    <div class="wrapper">
        <header class="header">
            <div class="container">
                ХЕДЕР
            </div>
        </header>
        <div class="content">
            <div class="container">
                <section class="первая секция контента">
                    ПЕРВАЯ СЕКЦИЯ КОНТЕНТА
                </section>
            </div>
        </div>
        <footer class="footer">
            <div class="container">
                ФУТЕР
            </div>
        </footer>   
    </div>
</body>

2. 当前CSS代码 #

.container{
    max-width: 1170px;
    padding: 0px 15px;
    margin: 0px auto;
    min-height: 100%;
}

.wrapper{
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.content{
    flex: 1 1 auto;
}

3. 疑问 #

嵌套在content中的container设置min-height: 100%后，并未占满content区块高度，原因是什么？如何不使用Flex布局，仅通过min-height实现让container占满剩余屏幕高度，同时将footer推至底部？

二、原因分析 #

min-height: 100%的生效必须依赖父元素的明确高度值。当前content作为Flex子元素，靠flex:1 1 auto获得了剩余空间，但它本身没有设置height或min-height属性，高度属于“由内容自动撑开”的状态。这种情况下，子元素container的min-height:100%找不到可继承的高度基准，自然无法占满父元素content的高度。

三、不使用Flex的解决方案 #

可以通过负margin+内边距的经典“粘性footer”方案实现，核心是让wrapper占据视口高度，用内边距给footer预留位置，再用负margin让footer向上偏移填补空隙，同时给content和container设置min-height:100%来撑满剩余空间。

1. 调整后的CSS代码 #

/* 重置默认边距，避免干扰布局 */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

.wrapper {
    min-height: 100%;
    overflow: hidden;
    /* 预留footer高度，值需和footer的height一致 */
    padding-bottom: 60px; 
    box-sizing: border-box;
}

.content {
    min-height: 100%;
}

.container {
    max-width: 1170px;
    padding: 0 15px;
    margin: 0 auto;
    min-height: 100%;
}

.footer {
    /* 高度与wrapper的padding-bottom保持一致 */
    height: 60px;
    margin-top: -60px;
    box-sizing: border-box;
}

2. 方案说明 #

• 先给html和body设置height:100%，让wrapper的min-height:100%有明确的高度基准可继承。
• wrapper的padding-bottom值要和footer的height完全相等，用于预留footer的显示空间，防止页面内容被footer遮挡。
• footer的margin-top:-60px会让它向上偏移，刚好填补wrapper的内边距空隙，实现“固定在页面底部”的效果。
• content和container都设置min-height:100%，此时父元素都有明确的高度基准，container就能占满content的高度，进而撑满header和footer之间的剩余屏幕空间。

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