了解 html/body 高度属性和粘性页脚（未修复）答案

【问题标题】：Understanding html/body height property and sticky footer (not fixed)了解 html/body 高度属性和粘性页脚（未修复）
【发布时间】：2017-02-03 03:31:30
【问题描述】：

我一直在咨询很多关于粘性页脚的线程（即使内容很少，页脚也会粘在页面底部），尽管这些变通办法可以解决问题，但我发现它们有点混乱，不要'不明白为什么简单的事情不起作用。

这是我想要做的：

<html>
  <body>
    <header></header>
    <main></main>
    <footer></footer>
  </body>
</html>

和

html {
  height: auto;
  min-height: 100%
}

body {
  height: 100%;
}

main {
  height: calc(100% - 50px - 50px); //container's height - (header height + footer height)
}

header, footer {
  height: 50px;
}

我对这段代码的问题是正文不会尊重height: 100% 属性，只会环绕正文内容，而不是扩展到其容器的 100%，即 html。
html 标签工作正常，它的最小高度是视口，如果内容大于视口，它将以height: auto; 扩展。

为什么正文不会扩展到 html 高度的 100%？
我已经尝试了我的代码，如果我将 html 的高度设置为像素值，它会完美运行，主体将扩展为 html 的 100%。但是如果 html 的高度是自动的，它就不会扩展。

我既不能将 html 的高度设置为 100%（即使主体会扩展以填充 html 标签），因为当内容低于视口的 100% 时，html 不会扩展以包含内容，它只会溢出。

我有什么遗漏吗？我怎样才能做到这一点？

编辑：
感谢所有有见地的答案和 cmets！
这是我能想到的最好的方法：

html {
  height: 100%;
}

body {
  height: 100%;
}

main {
  min-height: calc(100% - 50px - 50px); //container's height - (header height + footer height)
}

header, footer {
  height: 50px;
}

这样做会使main 的内容在内容长于视口时展开，或者如果内容短于视口则停留在页面底部。
由于我的页眉和页脚具有相对定位，我将它们的高度减去main 最小高度，因此当内容很少时页脚始终适合视口，而不触发滚动条显示。

此方法的唯一缺点是main 会从body 和html 元素溢出（因为它们的height: 100% 是视口的高度，但不会影响页面的呈现方式，并且似乎工作正常。

【问题讨论】：

我认为这里的问题是html 元素没有明确的高度，因此body 上的height: 100%; 规则没有可用作参考的值。虽然我无法真正解释为什么会发生这种情况背后的理论，但您可以have a look here 看到它的实际效果。
这正是正在发生的事情。但是我既找不到解释也找不到解决方法。 Myabe 使用 JQuery 动态调整 html 的高度？我不知道。
我建议不要为此使用 jQuery；这是不必要的开销，会让你在路上头疼。 CSS 完全有能力为您处理这个问题。还要记住，标记结构对这些点有很大的影响，所以你应该对 er-han 的回答特别感兴趣。
我同意，Jquery 是出于绝望而出现在我的脑海中，但我想我可能已经找到了进入这方面的道路，并且会尝试一些事情。
您的代码很好，可以在 Edge/Firefox/Chrome 中运行，IE 除外。 calc 在 IE 11 中没有得到适当的支持，您可以在这里看到 caniuse.com/#feat=calc 大多数已知问题都与 IE 11 有关。顺便说一句，您需要为 html 设置 height: 100%，并且不需要 min-height。

标签： html css

【解决方案1】：

嗯，你的代码在我的本地运行得很好。但是，我知道这是大多数浏览器版本的普遍问题，html 和body 高度可能无法正常运行。他们有时的行为与您的方法所预期的不同。

您可以尝试我使用多年的方法，并且对结果感到满意。我不会强求html 和body 高度。

HTML 结构：

<html>
    <body>
        <div id="page">
            <header></header>
            <main></main>
        </div>
        <footer></footer>
    </body>
</html>

风格是：

<style>
header, footer {
    height: 50px;
}

#page {
    min-height:100%;
}

main {
    padding-bottom:50px;/* This is related to the footer's height */
}

footer {
    margin-top: -50px;/* This is related to the footer's height */
}
</style>

如果您希望页脚始终留在底部，即使页面内容高于视口，只需将#page 的min-height 属性替换为height 即可，如下所示：

#page {
    height:100%;
    overflow:auto;
}

【讨论】：

这是一个确实可行的变通方法，并将成为我的备用解决方案。但是我有点固执，还没有准备好放弃这个 html 高度问题哈哈。我只需要了解为什么它不起作用。谢谢！
@eloism 这就是精神！大声笑，如果您弄清楚了，请让我通知或将其作为答案发布在这里。我也想知道
确实经过几次测试，我想我可能已经找到了最简单的方法，我已经编辑了我的帖子。还检查了 Gcyrillus 的帖子，它做了类似的事情，但使滚动条出现在 main 周围而不是 body 周围。对于某些网站（比如我的）来说，这可能很有趣。谢谢！

【解决方案2】：

你考虑过flex 吗？它确实需要非常少的 CSS

修复了示例页眉和页脚：

html,body {
  height:100%;/* % needs a value from parent to be calculated, except for html wich takes window for reference. If you skip html, then body's height is 100% of null .... */
  margin:0;
}

/* layout */
body {
  display:flex;
  flex-direction:column;
  }

main {
  flex:1;
  overflow:auto;
  
  /* see me */
  box-shadow:inset 0 0 0 1px;
  }

    <header>Any<br/> height </header>
    <main> whatever, <br/>i'll be showing a scrollbr instead pushing against footer.</main>
    <footer> any height</footer>

页脚固定：

html,body {
  height:100%;/* % needs a value from parent to be calculated, except for html wich takes window for reference. If you skip html, then body's height is 100% of null .... */
  margin:0;
}

/* layout */
body {
  display:flex;
  flex-direction:column;
  }

section {
  flex:1;
  overflow:auto;
  
  /* see me */
  box-shadow:inset 0 0 0 1px;
  }

<section>
  <header>header</header>
    <main>and the rest </main>
  </section>
    <footer> any height footer remaining at window bottom</footer>

【讨论】：

感谢您的回答，这是一个有趣的解决方法。这种方法的唯一缺陷是在向上或向下滚动时，页眉和页脚最终都被固定：/
@eloism 如果将 header 和 main 放在一起，那么只有页脚保持可见。 添加了一个 sn-p 以显示该技术是多么容易

【解决方案3】：

将 Main 替换为 Section，它应该会按照您的要求提供输出。

DOM

<html>
  <body>
    <header>asdf</header>
    <section>asdf</section>
    <footer>asdf</footer>
  </body>
</html>

CSS

html {
  height: auto;
  min-height: 100%
}

body {
  height: 100%;
}

section{
  height: calc(100% - 50px - 50px);
}

header, footer {
  height: 50px;
}

输出

【讨论】：

感谢您的回答，但不幸的是，它给了我与 main 相同的结果：正文没有扩展到 html 的高度，只是包裹在 section
我刚刚添加了输出。这是你需要完成的吗？如果是，上面的代码也应该对你有用。
这确实是我想要做的！然而，在我的情况下，html height: auto 似乎阻止了身体的扩张。在更新之前我会尝试不同的东西，看看它是如何工作的。

【解决方案4】：

<html>
    <head>
        <title>Stackoverflow</title>
        <style>
            header {
                position: absolute; 
                right:0; 
                left:0; 
                top: 0; 
                background: yellow; 
                height: 50px;
            }
            main {    
                position: relative;
                min-width: 100%;
                margin-top: 50px;
                height: 100vh;
                background: green;}
            footer {
                position: fixed; 
                right:0; left:0; 
                bottom: 0; 
                background: blue; 
                height: 50px;
            }
        </style>
    </head>
    <body>
        <header></header>
        <main></main>
        <footer></footer>
    </body>
</html>

【讨论】：