身高不适用于 body 骨架

Question

这是我关于 Stack 的第一个问题，我希望有人能帮助我解决这个问题。

我使用 Skeleton 构建的页面有问题。问题是我无法将 "height" 设置为 100%。我希望我的页脚始终位于底部，这样我的页面的其余部分就会扩展到完整 window。我该怎么做？

代码如下：

html {
    font-size: 62.5%;
    min-width: 100%;
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

body {
    font-size: 1.5em;
    line-height: 1.6;
    font-weight: 400;
    font-family: 'Lato', sans-serif;
    color: #FFD6ED;
    background-color: #1D003E;
    min-width: 100%;
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

HTML 非常标准：

<html>

<body>
    <header>
        <div class="container">
            <div class="rows">
                <div class="twelve columns">
                    Content
                </div>
            </div>
        </div>
    </header>
</body>

</html>

None 有效。我也试过设置高度：100vh，但还是没有成功。我在这里阅读了很多主题，所有已发布的解决方案都没有改变任何事情。

Answer 1

有无数种方法可以实现这一点。这是使用 Flexbox 的方法。 Google "sticky footer" 找到更多。

body {
  margin: 0;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
main {
  flex: 1;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" />

<body>
  <main class="container">
    <header>
      <div class="rows">
        <div class="twelve columns">
          Content
        </div>
      </div>
    </header>
  </main>
  <footer>
    <div class="container">
      Hello there!
    </div>
  </footer>
</body>

身高不适用于 body 骨架

Height not working on body with skeleton

html

css

height

skeleton-css-boilerplate