在页面底部粘贴页脚 [英] Stick Footer at the bottom of page

问题描述

即使没有内容，我也希望在页面底部贴上页脚.当有足够的内容时，页脚应移至页面末尾.

I want to stick footer at the bottom of the page even when there is no content. When there is enough content, the footer should move to the end of the page.

我正在学习flexbox，并尝试使用flexbox.但这不起作用.

I'm learning flexbox and tried doing so using flexbox. But it isn't working.

html {
  height: 100%;
}

body,
#root {
  display: flex;
  flex-direction: column;
}

.app {
  text-align: center;
}

.header,
.footer {
  background: #282c34;
  flex-shrink: 0;
  color: white;
}

.main {
  flex: 1 0 auto;
}

a {
  text-decoration: none;
  color: #42A5F5;
  padding: 20px 0;
}

<div class="root">
  <div class="app">
    <div class="header">
      <a href="#">Logo</a>
      <h1>Application Name</h1>
      <nav>
        <a href="#" class="navItem">Link1</a>
        <a href="#" class="navItem">Link2</a>
        <a href="#" class="navItem">Link3</a>
      </nav>
    </div>

    <div class="main">
      <p class="description">Small Description</p>
      <div class="search">
        <input type="text" />
        <p>Please Insert Search Query</p>
      </div>
      <div class="searchResult"></div>
    </div>

    <div class="footer">
      <div class="about">Some Random Company</div>
      <div class="footerLink">Contact</div>
      <div class="social">Twitter</div>
    </div>
  </div>
</div>

我想知道为什么它不起作用以及我在这里犯的错误. 我知道之前曾有人问过这个问题.我只想知道代码有什么问题，以便在理解它之后可以编写更好的CSS.

I want to know why it's not working and the mistake that I'm doing here. I know this question has been asked before. I just want to know, what's wrong with my code so that I can write better CSS after understanding it.

此外，这是更新的 jsFiddle

推荐答案

代替html或#root将.app设置为Flex容器，将min-height设置为100vh

Instead to html or #root set .app as your flex container and a min-height of 100vh

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

.app {
  text-align: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header,
.footer {
  background: #282c34;
  flex-shrink: 0;
  color: white;
}

.main {
  flex: 1 0 auto;
}

a {
  text-decoration: none;
  color: #42A5F5;
  padding: 20px 0;
}

<div class="root">
  <div class="app">
    <div class="header">
      <a href="#">Logo</a>
      <h1>Application Name</h1>
      <nav>
        <a href="#" class="navItem">Link1</a>
        <a href="#" class="navItem">Link2</a>
        <a href="#" class="navItem">Link3</a>
      </nav>
    </div>

    <div class="main">
      <p class="description">Small Description</p>
      <div class="search">
        <input type="text" />
        <p>Please Insert Search Query</p>
      </div>
      <div class="searchResult"></div>
    </div>

    <div class="footer">
      <div class="about">Some Random Company</div>
      <div class="footerLink">Contact</div>
      <div class="social">Twitter</div>
    </div>
  </div>
</div>

:更新了代码段，以包含一个重置，该重置将删除不必要的滚动条

Updated the code snippet to include a reset which removes the unnecessary scrollbar

这篇关于在页面底部粘贴页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！