ChatGPT解决这个技术问题 Extra ChatGPT

CSS使HTML页面页脚以最小高度留在页面底部,但不与页面重叠

我有以下页面(死链接: http://www.workingstorage.com/Sample.htm )有一个页脚,我不能让它坐在页面底部。

我希望页脚

当页面较短且屏幕未填满时,贴在窗口底部,并且

当内容超过一屏时(而不是重叠内容),停留在文档末尾并正常向下移动。

CSS是继承的,让我感到困惑。我似乎无法正确更改它以在内容上设置最小高度或使页脚进入底部。

令人惊讶的是,这是一个如此普遍的问题。也许在 CSS4 中我们会看到“制作导航栏”和“制作页脚”的实现,因为这些尝试非常频繁。
永远不会有 CSS4(CSS3 只会增长)。我认为这将通过实施 flexbox 得到解决。
这方面的优秀文章:css-tricks.com/couple-takes-sticky-footer

v
vsync

以下是我的4种不同的方法:

在每个示例中,文本都是可自由编辑的,以说明内容在不同场景中的呈现方式。

1) 弹性盒

身体{身高:100vh;边距:0; } 标题{ 最小高度:50px;背景:浅青色; } 页脚{ 最小高度:50px;背景:木瓜鞭; } /* 技巧 */ body{ display:flex;弹性方向:列; } 页脚{ 边距顶部:自动; }

Header
Content
Footer

2) 网格

身体{最小高度:100vh;边距:0;显示:网格;网格模板行:自动 1fr 自动; } 标题{ 最小高度:50px;背景:浅青色; } 页脚{ 最小高度:50px;背景:木瓜鞭; }

Header
Content
Footer

下面的这个方法使用了一个“技巧”,通过在 body 上放置一个 ::after 伪元素,并将其设置为具有页脚的 精确 高度,因此它将占据完全相同的空间页脚确实如此,所以当页脚 absolute 定位在它上面时,它看起来就像页脚真的占用了空间并消除了它的绝对定位的负面影响(例如,越过正文的内容)

3)位置:绝对(没有动态页脚高度)

身体{最小高度:100vh;边距:0;位置:相对; } 标题{ 最小高度:50px;背景:浅青色; } 页脚{ 背景:木瓜鞭; } /* 技巧:*/ body { position: relative; } body::after { 内容:'';显示:块;高度:50px; /* 设置与页脚高度相同 */ } footer { position: absolute;底部:0;宽度:100%;高度:50px; }

Header
Content
Footer

4)表格布局

html{高度:100%; } 身体 { 最小高度:100%;边距:0; } 标题 { 高度:50 像素;背景:浅青色; } 文章 { 高度:1%; } 页脚 { 高度:50 像素;背景:木瓜鞭; } /**** 技巧:****/ body { display: table;宽度:100%; } 正文 > 页脚 { 显示:表格行; }

Header
Content
Footer


简单而优雅,更重要的是它有效。当您开始使用 display: table display: table-row display:table-cell 添加 div 时,其他解决方案会失败。但是我发现我需要添加 body {margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0;} 以避免滚动条。您可以通过调整 body:after height 来解决这个问题,但我指定我的是 rem 而不是 px,所以它变得有问题。
@SteveWaring - 谢谢。更新了这个答案,因为它已经很老了。现在我赞成使用 flexbox
“基本通用标记”下的 CSS 有一个小错误,导致它无法工作(链接的“DEMO”中不存在该错误,这没关系)。我冒昧地修复它。
谢谢你! flexbox 解决方案实际上很简单,没有使用任何技巧或奇怪的固定尺寸或固定位置。
另一个提示是不要使用 height:100vh,而是尝试使用 min-height:100vh,在某些情况下,视口上的内容太大,而是将其设置为最小高度。
S
Smart Manoj

一个简单的方法是使您的页面的正文 100% 也具有 100%min-height。如果页脚的高度没有改变,这可以正常工作。

给页脚一个负边距顶部:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

这只有在您提前知道页脚的高度时才有效。有时页脚具有动态内容,或者您正在构建一个框架。关于可变高度页脚的任何想法?
@Costa 检查我的答案 here,以获得适用于可变高度页脚的解决方案。
对于动态内容,只需省略“高度”,页脚将适应内容。未在所有浏览器中测试
这可能需要 box-sizing: border-box; 到正文 [和 #container]。
这似乎有很多奇怪的技巧,下面有一些简单且不使用技巧的答案。
R
René K

一个非常简单的跨浏览器效果很好的方法是:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html,正文{边距:0;填充:0;高度:100%; } #container { 最小高度:100%;位置:相对; } #header { 背景:#ff0;填充:10px; } #body { 填充:10px;填充底部:60px; /* 页脚高度 */ } #footer { position:absolute;底部:0;宽度:100%;高度:60px; /* 页脚高度 */ background:#6cf; }

body


如果您用两根手指调整窗口大小,该方法不适用于 Android 上的 Firefox
是的,我不喜欢这种方法。它的响应速度不是很好,因为如果您有一个高度较小的设备(例如移动设备)并且内容自然会溢出查看器的高度,页脚将由于其绝对定位而覆盖在您的内容上。我认为 flexbox 方法更好。
T
Tomerikoo

我用它把我的页脚贴在底部,它对我有用:

HTML

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

这是您必须在 HTML 中进行的唯一修改,将 div 添加到 "allButFooter" 类中。我对所有页面都做了,那些很短,我知道页脚不会粘在底部,还有足够长的页面,我已经知道我必须滚动。我这样做了,所以我可以看到它在页面内容是动态的情况下可以正常工作。

CSS

.allButFooter {
    min-height: calc(100vh - 40px);
}

"allButFooter" 类有一个 min-height 值,它取决于视口的高度(100vh 表示视口高度的 100%)和页脚的高度,我已经知道是 40px

这就是我所做的一切,它对我来说非常有效。我没有在每个浏览器中都尝试过,只有 Firefox、Chrome 和 Edge,结果如我所愿。页脚贴在底部,您不必弄乱 z-index、位置或任何其他属性。我文档中每个元素的位置都是默认位置,我没有将其更改为绝对或固定或任何东西。

使用响应式设计

这是我想澄清的事情。当我使用 Twitter-Bootstrap 进行响应式设计时,此解决方案具有相同的 40 像素高的页脚,但并没有像我预期的那样工作。我不得不修改我在函数中减去的值:

.allButFooter {
    min-height: calc(100vh - 95px); 
}

这可能是因为 Twitter-Bootstrap 带有自己的边距和填充,所以这就是我必须调整该值的原因。


我对这个问题的各种解决方案都遇到了问题。此解决方案适用于我的页面,该页面使用 display: noneThanks 来改变正文中显示的内容。它也很好也很简单。
经过数小时的尝试解决方案后,只有两个工作 nl。 position: fixed; bottom: 0 和这个。这种解决方案是最好的,因为页脚不会粘在底部,而是停留在可滚动页面的末尾。
为了建立您的答案,您可以通过设置 .footer {max-height: calc(100vh+40px); position: absolute} 以另一种方式看待它。因为它也有效,你应该只知道你的体型。
min-height: calc(100vh - 200px); 与布尔玛,在这里。谢谢!
m
m.spyratos

一个非常简单的 flex 解决方案,它不假设固定高度或改变元素的位置。

HTML

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

浏览器支持

所有主流浏览器,IE11 及以下版本除外。

确保使用 Autoprefixer 作为适当的前缀。

.container { 显示:-webkit-box;显示:-ms-flexbox;显示:弯曲; -webkit-box-orient:垂直; -webkit-box-direction:正常; -ms-flex-direction:列;弹性方向:列;最小高度:100vh; } 主要 { -webkit-box-flex: 1; -ms-flex:1;弹性:1; } ///////////////////////////////////// 正文,html {边距:0;填充:0; } 页眉,主要,页脚 { 边距:0;显示:块; } 页眉,页脚 { 最小高度:80px; } 标题 { 背景颜色:#ccc; } 主要 { 背景颜色:#f4f4f4; } 页脚 { 背景颜色:橙色; }


像魅力一样工作!即使 res 超过 4k 页脚粘在底部
主流浏览器⊅ IE11
工作!你能解释一下它是如何工作的吗?
如果它支持 flexbox,为什么它在 IE 11 中不起作用?
L
Liam

从 IE7 开始,您可以简单地使用

#footer {
    position:fixed;
    bottom:0;
}

请参阅 caniuse 以获得支持。


当页脚之外有内容时,我不希望页脚位于底部。我希望页脚在没有足够时粘在底部,然后在超过一屏时正常向下扩展。粘性页脚解决了这个问题。
@Caveatrob:我冒昧地将这些重要信息编辑到您的问题中,以避免误解(对于未来的读者,您可能已经解决了这个问题:-))。
此解决方案是唯一一种将页脚打印到每一页的解决方案,而且非常简单!但我不能让它工作,内容不与主要内容重叠。有人对此有解决方案吗?
R
Rasaf Ibrahim

使用 Flexbox 将页脚保持在底部

I我是一个标题。
我是文章!
我是一个页脚。

笔记

确保将所有内容包装在

或任何其他具有以下 CSS 样式的块级元素中: min-height:100vh;显示:弹性;弹性方向:列;对齐内容:空格之间; .

确保将除页脚元素之外的所有内容都包装在

或任何其他块级元素中。

确保使用

或任何其他块级元素来包装页脚。

代码说明

min-height: 100vh 确保 body 元素至少伸展到屏幕的全高

flex-direction: column 在保留堆叠的块元素方面保持正常文档流的行为(假设正文的直接子元素实际上都是块元素)。

justify-content:space-between 将页脚推到屏幕底部。

查看如何使用 Bootstrap 5 - Link 执行相同操作(将页脚保持在底部)


最简单但又令人惊叹,效果很好!
奇迹般有效
S
Sanjeev

我使用的一个简单的解决方案,适用于 IE8+

在 html 上给出 min-height:100% ,这样如果内容较少,则页面仍会采用完整的视口高度,页脚会停留在页面底部。当内容增加时,页脚会随着内容向下移动并保持在底部。

JS 小提琴工作演示:http://jsfiddle.net/3L3h64qo/2/

CSS

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

html

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>

很好..但只需更新 .pageContentWrapper{ padding-bottom:100px;/* 页脚高度*/ }
我不想尽可能制作不必要的滚动条。
J
Jose Rui Santos

然而,另一个非常简单的解决方案是这个:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

jsFiddle

诀窍是对整个文档使用 display:table,对页脚使用 display:table-rowheight:0

由于页脚是唯一显示为 table-row 的 body 子项,因此它呈现在页面底部。


我喜欢 css 表,但它们会产生非常奇怪的问题:stackoverflow.com/questions/24898115/…
这个解决方案似乎并不完全有效 - Firefox 忽略页脚高度 0。我使用高度 1px 甚至 1% 代替。 Edge、IE11、Chrome 和移动 Safari 对 0 感到满意。
我真的很喜欢这个解决方案。但是当我像这样构建我的布局时,浏览器对子元素的计算会变得很复杂。假设我们想要在页面顶部有一个容器,它必须是 height: 100%,然后当视口比率为 1/1(正方形)时,它实际上是 100%。当视口变宽(横向)高度将大于 100%,如果变窄(纵向)则小于 100%。所以高度与窗口的宽度成正比。试图用另一个包装器解决它,但这没有用。有人得到了解决方案或至少一个提示???
@Axel 在这个version中,我在顶部添加了一个 100% 高度的蓝色 div,它占据了所有高度(减去页脚高度),无论视口宽度如何。我想你可能有其他的 CSS 搞砸了。尝试根据我原来的 jsFiddle 创建问题的最小化版本
A
Aarth Tandel

做这个

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

您还可以阅读所有现代浏览器都支持的 flex

更新:我阅读了 flex 并尝试了它。它对我有用。希望它对你也一样。这是我的实现方式。这里主要不是 ID 它是 div

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

main {
    display: block;
    flex: 1 0 auto;
}

您可以在此处阅读有关 flex 的更多信息https://css-tricks.com/snippets/css/a-guide-to-flexbox/

请记住,旧版本的 IE 不支持它。


这是实践中的最佳答案。对页脚上方的内容使用 flex-grow: 1 将使页脚正确地保持在底部。
我发现第一个答案确实有效并且不需要随机div。谢谢你。
Z
Zoe stands with Ukraine

这就是我解决相同问题的方法

html { 高度:100%; box-sizing:边框框; } *, *:before, *:after { box-sizing: inherit; } 身体 { 位置:相对;边距:0;底部填充:6rem;最小高度:100%; font-family: "Helvetica Neue", Arial, sans-serif; } .demo { 边距:0 自动;填充顶部:64px;最大宽度:640px;宽度:94%; } .footer { 位置:绝对;右:0;底部:0;左:0;填充:1rem;背景颜色:#efefef;文本对齐:居中; }

CSS “Always on the bottom” Footer

我经常发现自己设计的网站页脚必须位于页面底部,即使内容上面太短了,不能自然地将它推到视口的底部。

但是,如果内容高于用户的视口,那么页脚应该像往常一样从视图中消失,停留在页面底部(不固定到视口)。

如果您知道页脚的高度,那么您应该明确设置它,并将页脚的父元素的底部填充设置为相同的值(或更大,如果你想要一些间距)。

这是为了防止页脚与上面的内容重叠,因为它是从文档流中删除的 position: absolute; .


R
ROOT

这称为粘性页脚。 google search 会产生很多结果。 A CSS Sticky Footer 是我成功使用的那个。但还有更多。

* {边距:0; } html, 身体 { 高度: 100%; } .wrapper { 最小高度:100%;高度:自动!重要;高度:100%;边距:0 自动 -4em; } .footer, .push { 高度:4em; }

你的网站内容在这里。< /p>

Source for this code


Z
Zoe stands with Ukraine

需要提防的一件事是移动设备,因为它们以“不寻常”的方式实现了视口的概念:

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

因此,使用 position: fixed;(正如我在其他地方看到的推荐)通常不是要走的路。当然,这取决于您所追求的确切行为。

我使用过并且在台式机和移动设备上运行良好的是:

<body>
    <div id="footer"></div>
</body>

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}
 
#footer {
    position: absolute;
    bottom: 0;
}

K
Karthikaeyan
footer {
  margin-top:calc(5% + 60px);
}

这工作正常


A
Aashutosh Kumar

为我工作。

#container{ 
  height:100vh; 
  margin:0; 
  display:flex; 
  flex-direction:column; 
}

#footer{
  margin-top:auto; 
}


<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>

#container{ 高度:100vh;边距:0;显示:弹性;弹性方向:列; } #footer{ 边距顶部:自动; }

body


C
Camo

我刚刚在这里回答了类似的问题:

Position footer at bottom of page having fixed header

我是 Web 开发的新手,我知道这已经得到了回答,但这是我发现解决它的最简单方法,我认为有些不同。我想要一些灵活的东西,因为我的 Web 应用程序的页脚有一个动态高度,我最终使用了 FlexBox 和一个分隔符。

首先为您的 html 和 body 设置高度

html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

我假设我们的应用程序具有 column 行为,以防您需要添加标题、英雄或任何垂直对齐的内容。

创建间隔类

.spacer {
    flex: 1; 
}

因此,稍后您的 HTML 可能类似于

<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

你可以在这里玩它https://codepen.io/anon/pen/xmGZQL


Z
Zoe stands with Ukraine

我自己一直在研究这个问题。我见过很多解决方案,每个解决方案都有问题,通常涉及一些神奇的数字。

因此,使用来自各种来源的最佳实践,我想出了这个解决方案:

http://jsfiddle.net/vfSM3/248/

我想在这里特别实现的是让主要内容在绿色区域内的页脚和页眉之间滚动。

这是一个简单的CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}

我讨厌这样设计的网站。为什么要限制我可以同时阅读的文本数量?我不需要一直查看页眉和页脚,我知道在需要时可以在哪里找到它们。
@Tarmil 看看 numerics.info。你现在知道这什么时候有用了吗?
Z
Zoe stands with Ukraine

我的 jQuery 方法,如果页面内容小于窗口高度,则此方法将页脚放在页面底部,否则将页脚放在内容之后:

此外,在其他代码之前将代码保留在自己的外壳中将减少重新定位页脚所需的时间。

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();

Z
Zoe stands with Ukraine

我使用 CSS 网格实现了这一点,基本上我定义了 3 行:

标题

内容

页脚

并且使用网格来定义大小,诀窍是在行尾对齐页脚,如下所示:

CSS

body {
    display: grid;
    grid-template-rows: auto auto auto;
}

footer {
    display: grid;
    align-self: end; /* The trick */
}

HTML 文件

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <header>
    Header content
  </header>
  
  <h1>main body</h1>
  <p>This is a paragraph.</p>
  
  <footer>
    <p>Hello there.</p>
  </footer>
</body>
</html>

您可以使用更多行,但请记住将其添加到 CSS 中,或者将所有内容包装在 div 中。

本指南 here 确实帮助我解决了这个问题。


R
RICHARD ABRAHAM

使用 Bootstrap 的 ONE line 解决方案

除了提供的所有 CSS 和 jQuery 解决方案之外,
我列出了一个使用 Bootstrap 的解决方案,并在 body 标记上使用单个类声明: d-flex flex-column justify-content-between

这不需要提前知道页脚的高度。

这不需要设置绝对位置。

这适用于在较小屏幕上溢出的动态 div。

html, 身体 { 高度:100%; }

页眉

Main

页脚


不错的方法,尽管您可能想要添加 min-height: 100vh;到身体,所以它填满整个视口
佚名

我认为您可以将主要内容设置为视口高度,因此如果内容超出,主要内容的高度将定义页脚的位置

{边距:0;填充:0;宽度:100%; } 身体 { 显示:弹性;弹性方向:列; } 标题 { 高度:50 像素;背景:红色; } 主要 { 背景:蓝色; /* 这是最重要的部分*/ height: 100vh; } 页脚{ 背景:黑色;高度:50px;底部:0; }


当 main 中的内容高于 main 时,我遇到了问题。就我而言,我主要有很多文章作为网格。因此,例如,当文章数为 50 时,我有非常大的垂直滚动并且主要内容非常高。在这种情况下,页脚出现在我的网格后面的某个地方。修复:我只设置了 min-height:100vh 而不是 height:100vh ,并且在每种情况下都能完美运行。 PS我在reactjs中使用material-ui,但我认为没关系
t
titleLogin

您需要使用 position: absolute; 这很重要,然后 bottom:0

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

A
Abdallah Abdillah

你可以这样做

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}

C
Cybernetic

bottomleftright 设置为 0 的位置 fixed 最适合我:

.footer {    
    position: fixed;
    background : #d1ccc0;
    bottom : 0;
    left : 0;
    right : 0;
    height : 50px;
}

位置 absolute 不会粘在底部,但 fixed 会。


C
Crazy Cat

虽然我找到了许多类似的答案,但我能找到的唯一解决方案是页脚始终位于底部且未显示在现有数据之上:

footer {
    position: relative;
    clear: both;
}

r
rashedcs

只需自定义页脚部分

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}
 <div class="footer">
   Footer is always bootom
 </div>

不工作。即使我们有很大的页面,它也总是粘在底部。它不能滚动所有页面,而只能停留在底部。
S
San Jaisy
<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>


#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

m
mhlavacka

其实很简单。此解决方案不需要知道页脚高度。

<body>
  <div class="app">
    Website
  </div>
  <div class="footer">
    Footer
  </div>
</body>
.app {
  min-height: 100vh;
}

Z
Zoe stands with Ukraine

与其他解决方案相比,不需要添加额外的容器。因此,这个解决方案更加优雅。在代码示例下面,我将解释为什么会这样。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>
        
            html
            {
                height:100%;
            }
            
            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }
        
            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }
            
            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;
                
                background-color: red;
            }
        
        </style>
    </head>
    <body>
        <header>header</header>
        
        
        <footer>footer</footer>
    </body>
</html>

所以我们做的第一件事,就是让最大的容器(html)100%。 html 页面与页面本身一样大。接下来我们设置 body 高度,它可以大于 html 标签的 100%,但至少应该一样大,因此我们使用 min-height 100%。

我们也使身体相对。相对意味着您可以将块元素从其原始位置相对移动。我们在这里不使用它。因为亲戚有第二个用途。任何绝对元素对于根 (html) 或第一个相对父/祖父母都是绝对的。这就是我们想要的,我们希望页脚是绝对的,相对于主体,即底部。

最后一步是将页脚设置为绝对和底部:0,这会将其移动到第一个相对的父/祖父的底部(当然 body )。

现在我们还有一个问题要解决,当我们填满整个页面时,内容会位于页脚下方。为什么?好吧,因为页脚不再在“html 流”内,因为它是绝对的。那么我们如何解决这个问题呢?我们将在 body 中添加 padding-bottom。这确保了身体实际上比它的内容更大。


Z
Zoe stands with Ukraine

我做了什么

html

    <div>
      <div class="register">
         /* your content*/    
      </div>
      <div class="footer" />
  <div/>

CSS

.register {
          min-height : calc(100vh - 10rem);
  }

.footer {
         height: 10rem;
 }

不需要使用位置固定和绝对。只需以正确的方式编写html。


这是最好的解决方案。我正在使用它。主要答案不如这个使用 vh 和 calc 的简单解决方案那么好。