Question

我想实现一个粘性页脚，如果内容较少，它将被推到底部。

我已浏览过本网站的各个帖子，可以看到两个流行的解决方案（没有flexbox）使用

html, body 
{    
    height: 100%; 
}

OR

html 
{     
      position: relative;
      min-height: 100%; 
}

我只发布了我不理解的解决方案部分。在这里发表我的疑虑。请帮助我理解这些解决方案

（a）如上所述，第一个解决方案使用100％高度的html和body。但这里100％的高度是多少？它是指视口的高度还是整个文件的高度？

（b）在第一个解决方案中，如果100％高度仅指视口高度，则不需要将设置设置为最小高度而不是高度，因为如果文档大于视口，则限制为100 ％高度无关。

（c）我知道我们创建一个元素相对，以便它的子绝对/相对元素从它获得位置。但是制作html相对的含义是什么，因为它只有文档作为其父文件？

（d）另外，根据您的经验，有没有更好的解决方案（没有flexbox）？类似地，在使用此类解决方案时（例如，使用100vh时的ios8问题），有许多关于移动浏览器中的问题的帖子。这些解决方案是否有任何此类问题？

我的HTML知识非常有限。谢谢你的帮助。

注意：两种解决方案都运行正常，并根据需要提供粘性页脚

Answer 1

A）

默认情况下，html和body标记不会填满整个窗口，因此即使内部内容较少，代码也会强制显示为100％。

无：

100％：

B）

You can get away将<body>设为100％，因为默认情况下内容会溢出，<html>标记默认为overflow:auto。

因此，以下方法有效，但内容将溢出<body>

html, body {
  height: 100%;
}

better solution将是以下之一：

html, body {
  height: 100%;
}

body {
  overflow: auto;
}

html{
  height: 100%;
}

body {
  min-height: 100%;
}