如何让页脚保持在网页的底部?

我有一个简单的2列布局，带有一个脚注，可以清除标记中的左右div。我的问题是，我不能让页脚留在所有浏览器的页面底部。如果内容向下推页脚，它就会起作用，但情况并不总是如此。

当前回答

react友好的解决方案-(不需要分隔符div)

Chris coyer(值得尊敬的CSS-Tricks网站)在sticky - footer上保持了最新的页面，现在至少有五种创建sticky footer的方法，包括使用FlexBox和CSS-Grid。

为什么这很重要?因为，对我来说，我多年来使用的早期/旧方法对React不起作用——我不得不使用Chris的flexbox解决方案——这很简单，也很有效。

下面是他的CSS-Tricks flexbox粘性页脚-看看下面的代码，它不可能更简单。

(下面的StackSnippet示例没有完美地呈现示例的底部。页脚会延伸到屏幕底部，这在现实生活中是不会发生的。)

html,身体{高度:100%;} 身体{显示:flex;flex-direction:列;} .content {flex: 1 0 auto;} /* flex:增长/收缩/伸缩基础;* / .footer {flex-shrink: 0;} /* ----以下仅为演示---- */ .footer{背景:苍绿色;} 身体< > <div class="content">Page content - height扩展到填充空间</div> <footer class="footer"> footer Content</footer> . 身体< / >

Chris还为那些喜欢网格的人演示了这个CSS-Grid解决方案。

引用:

CSS-Tricks - Flexbox的完整指南

2020-08-12 18:14:03

其他回答

下面是一个使用jQuery的解决方案，它就像一个魅力。它检查窗口的高度是否大于主体的高度。如果是，则更改页脚的边距顶部以进行补偿。在Firefox, Chrome, Safari和Opera中测试。

$( function () {

    var height_diff = $( window ).height() - $( 'body' ).height();
    if ( height_diff > 0 ) {
        $( '#footer' ).css( 'margin-top', height_diff );
    }

});

如果你的页脚已经有一个边距顶部(50像素，例如)，你将需要改变最后一部分:

css( 'margin-top', height_diff + 50 )

2012-02-18 23:36:29

使用绝对定位和z-index创建一个粘脚div在任何分辨率，使用以下步骤:

创建一个脚注div, position: absolute;底部:0;以及期望的高度设置页脚的填充，以便在内容底部和窗口底部之间添加空白创建一个容器div，用position: relative包装主体内容;最小高度:100%; 为主内容div添加底部填充，它等于高度加上页脚的填充如果页脚被剪切，则设置页脚的z-index大于容器div

这里有一个例子:

<!doctype html> <html> <head> <title>Sticky Footer</title> <meta charset="utf-8"> <style> .wrapper { position: relative; min-height: 100%; } .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; } .column { height: 2000px; padding-bottom: 300px; background-color: grxqeen; } /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */ </style> </head> <body> <div class="wrapper"> <div class="column"> <span>hello</span> </div> <div class="footer"> <p>This is a test. This is only a test...</p> </div> </div> </body> </html>

2012-08-26 12:47:14

我发明了一个非常简单的解决方法，对我来说非常有用。您只需在div中包装除页脚之外的所有页面内容，然后将min-height设置为视点减去页脚高度的100%。不需要在页脚或多个包装器div上进行绝对定位。

.page-body {min-height: calc(100vh - 400px);} /*将400px替换为页脚高度*/

2021-04-19 17:12:11

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

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

2017-12-04 19:47:49

查看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;
}

2021-01-18 12:26:32

如何让页脚保持在网页的底部?

推荐文章

最新文章

标签