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; }

Bam！页脚始终位于底部，您不必担心填充，边距或绝对位置！

Answer 2

您需要将页脚的父级显示为 column flexbox（必须使用column，因为您需要弹性项垂直堆叠 not 水平堆叠）；然后将页脚的margin-top设置为auto。

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
font-family: Arial, sans-serif;
}

.text-center {
  text-align: center;
}

.page-wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

main {
 padding: 0 15px;
}

footer {
  background-color: #242424;
  color: #fff;
  padding: 15px 0;
  margin-top: auto;
}

<div class="page-wrapper">
  <main id="main">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, dicta. Aut aspernatur ratione, eligendi quis inventore tempore aliquid sequi architecto, natus id deserunt perferendis excepturi sint blanditiis, similique aperiam dicta.</p>
    <p>Earum incidunt distinctio repellendus, sequi, voluptate sint aperiam necessitatibus ut, a ipsa officiis ab quasi, odio soluta quos amet praesentium? Nesciunt repudiandae maiores in vel nulla magni aperiam omnis placeat!</p>
  </main>
  <footer class="text-center">Lorem ipsum dolor</footer>
</div>

如何在不增加填充内容的情况下在底部设置页脚

2 个答案: