css 对齐页脚(与空格)始终在底部[重复]

gpfsuwkq 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(131)

此问题在此处已有答案：

Footer at bottom of page or content, whichever is lower（5个答案）
7天前关闭
我有两个部门。

第一个包含印记的内容：公司部分。
第二个是footer：footer-section，它应该总是在底部。所以我想在它们之间创造空间。

我尝试将margin-bottom: auto;添加到我的company-section，但它不工作。

#company-section{
    display: flex;
        flex-direction: column;
        align-items: center;
}
.company-alignment {
    width: 100%;
    max-width: 1240px;
}


#footer-section {
    display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
}

#login-section {
margin-bottom: auto;
}

个字符

css

来源：https://stackoverflow.com/questions/77740919/align-footer-with-space-always-on-the-bottom

1条答案

按热度按时间

hujrc8aj1#

将body元素设置为具有列方向的flex容器。使用flex：1将#company-section设置为占用可用空间，并使用margin-top：auto将#footer-section推到底部。这将创建所需的布局，其中两个部分之间有空间，页脚始终位于底部。

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure the body takes at least the full height of the viewport */
}

#company-section {
    flex: 1; /* Allow #company-section to take up remaining space */
    display: flex;
    flex-direction: column;
    align-items: center;
}

#footer-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: auto; /* Push #footer-section to the bottom */
}

字符串

赞(0）回复(0）举报 2024-01-09

我来回答

css 对齐页脚(与空格)始终在底部[重复]

1条答案

相关问题

热门标签

最新问答