Question

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

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

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。

此外，这是更新的jsFiddle

Answer 1

改为将html设置为#root或.app作为您的伸缩容器，并将min-height中的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>

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

Answer 2

希望这会有所帮助。

html {
  height: 100%;
}

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

.footer{
  margin-top:auto;
}

.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>

这些是更改。

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

Answer 3

为了便于查看，我给.body-content类指定了最小高度100vh。对于移动显示媒体查询，您可以将最小高度更改为100％，以便在内容很少的情况下不会有未使用的底部空间。希望这会有所帮助。

.container {
  background: #ccc
}

.body-content {
  min-height: 90vh;
  text-align: center;
  background: #fff;
  margin: 0;
  width: 400px;
  margin: 10px auto
}

.footer {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 20px
}

<div class="container">
  <div class="body-content">

    <h1>Body content here</h1>

  </div>
  <div class="footer">
     <h4>This is footer</h4>
  </div>
</div>

将页脚停留在页面底部

3 个答案: