html - 如何在不向正文内容添加填充的情况下在底部添加页脚

Question

在我的页面上，页脚就在内容下方，这具有完美的技术意义。然而，由于内容很短，并没有填满整个页面，只有一半，这使得页脚留在了屏幕中间。我想知道如何在页面底部显示页脚，以适应在其上查看的任何屏幕尺寸。我知道这可以通过填充到正文内容或页脚上的边距来完成，但是我不知道我是否可以这样做以适应每个屏幕尺寸。任何帮助将不胜感激!

CSS

footer {
    background-color: #242424;
    color: #fff;
    margin-top: 50px;
    padding-top: 20px;
    padding-bottom: 5px;
}

.search_wrapper {
    display: inline-flex;
    margin-top: 50px;
}

.search_ins {
    font-size: 25px;
    border: 1px solid #a6a6a6;
    border-radius: 25px 0px 0px 25px;
    padding: 3.2px 30px;
    outline: 0;
    width: 600px;
    height: 100px;
}

.search_ins:hover .search_ins:focus {
    border-color: #a6a6a6;
}

.search_button {
    font-size: 30px;
    border: 1px solid #a6a6a6;
    border-left: 0;
    padding: 0 12px;
    color: #fff;
    outline: 0;
    border-radius: 0px 25px 25px 0px;
    background-color: #fff;
    cursor: pointer;
}

Answer 1

最简单的方法是使用 vh 单位作为主要内容的高度。假设一个类似于下面的结构...

<main>Your content</main>
<footer>Footer</footer>

在主要内容上设置一个最小高度，等于窗口的 100% 减去页脚高度。

main { min-height: calc(100vh - 60px); }
footer { height: 60px; }

砰!页脚始终位于底部，您不必担心填充、边距或绝对定位!