Question

这是我在Stack上的第一个问题，我希望有人可以帮助我。

我的网页存在问题，我正在使用Skeleton构建。问题是我不能设置＆＃34;身高＆＃34;到100％。我希望我的页脚总是在底部，所以我的页面的其余部分延伸到完整的窗口。我该怎么做？

以下是代码：

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>

这些都不起作用。我也尝试设置高度：100vh，但再次没有运气。我在这里阅读了很多主题，所有发布的解决方案都没有改变。

Answer 1

有无数种方法可以实现这一目标。以下是使用Flexbox的方法。 Google for＆＃34;粘性页脚＆＃34;找到更多。

＆＃13;

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

＆＃13;

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

＆＃13;

高度不适用于骨骼的身体

1 个答案: