Question

我一直在咨询很多关于粘性页脚的帖子（即使内容很少，页脚仍粘在页面底部），而且这些解决方法可以解决问题，我发现它们有点混乱不明白为什么简单的事情不起作用。

这是我正在尝试做的事情：

<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将不会展开以包含内容，它会溢出。

有什么我想念的吗？我怎样才能做到这一点？

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

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%是视口的高度，但它不会影响页面呈现的方式，似乎正在发挥作用。

Answer 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的{{1}}属性替换为{{ 1}}像这样：

min-height

Answer 2

你考虑过flex吗？它需要非常小的CSS

示例标题＆amp;页脚修复：

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>

Answer 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;
}

<强>输出

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

了解html / body height属性和粘性页脚（未修复）

4 个答案: