div.fixed { 位置:固定; 底部:0; 右:0; 宽度:100%; 边框:3px实体#73AD21; ｝ <身体风格= "高度:1500 px”> < h2 >:固定;< / h2 > <p>一个位置为固定的元素;相对于视口的位置，这意味着即使页面被滚动，它也始终保持在相同的位置:</p> < div class = "固定" > 这个div元素的位置为:fixed; < / div > 身体< / >

很多人把这个简单问题的答案放在这里，但我有一件事要补充，考虑到我是多么沮丧，直到我弄清楚我做错了什么。

如前所述，最直接的方法是这样做。

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

body {
    background-color: transparent;
    position: static;
    height: 100%;
    margin-bottom: 30px;
}

.site-footer {
    position: absolute;
    height: 30px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

然而，post中没有提到的属性是body标签上的position: static，大概是因为它通常是默认的。相对位置无效!

我的wordpress主题覆盖了默认的主体显示，这让我困惑了很长一段时间。

一个类似于@gcedo的解决方案，但不需要添加中间内容来向下推页脚。我们可以简单地添加margin-top:auto到页脚，不管它的高度或上面内容的高度，它都会被推到页面的底部。

身体{ 显示:flex; flex-direction:列; 最小高度:100 vh; 保证金:0; ｝ .content { 填充:50 px; 背景:红色; ｝ .footer { margin-top:汽车; 填充:10 px; 背景:绿色; ｝ < div class = "内容" > 这里有些内容 < / div > <页脚类= >“页脚” 一些内容 < /页脚>

div.fixed { 位置:固定; 底部:0; 右:0; 宽度:100%; 边框:3px实体#73AD21; ｝ <身体风格= "高度:1500 px”> < h2 >:固定;< / h2 > <p>一个位置为固定的元素;相对于视口的位置，这意味着即使页面被滚动，它也始终保持在相同的位置:</p> < div class = "固定" > 这个div元素的位置为:fixed; < / div > 身体< / >

查看http://1linelayouts.glitch.me/，示例4。Una Kravets解决了这个问题。

这将创建一个带有页眉、主页和页脚的3层页面。

-你的页脚将始终停留在底部，并使用空间来适应内容;

-你的标题将始终保持在顶部，并使用空间来适应内容

-你的主系统总是会使用所有可用的剩余空间(剩余的部分空间)，如果需要，足够填满整个屏幕。

HTML

<div class="parent">
  <header class="blue section" contenteditable>Header</header>
  <main class="coral section" contenteditable>Main</main>
  <footer class="purple section" contenteditable>Footer Content</footer>
</div>
    

CSS

.parent {
  display: grid;
  height: 95vh; /* no scroll bars if few content */
  grid-template-rows: auto 1fr auto;
}
    

设置#页脚的CSS为:

position: absolute;
bottom: 0;

然后，您需要在#边栏和#内容的底部添加填充或边距，以匹配#footer的高度，或者当它们重叠时，#footer将覆盖它们。

此外，如果我没记错的话，IE6在底部有一个问题:0 CSS。你可能不得不为IE6使用JS解决方案(如果你关心IE6的话)。