我有以下页面(死链接: http://www.workingstorage.com/Sample.htm
)有一个页脚,我不能让它坐在页面底部。
我希望页脚
当页面较短且屏幕未填满时,贴在窗口底部,并且
当内容超过一屏时(而不是重叠内容),停留在文档末尾并正常向下移动。
CSS是继承的,让我感到困惑。我似乎无法正确更改它以在内容上设置最小高度或使页脚进入底部。
flexbox
得到解决。
以下是我的4种不同的方法:
在每个示例中,文本都是可自由编辑的,以说明内容在不同场景中的呈现方式。
1) 弹性盒
身体{身高:100vh;边距:0; } 标题{ 最小高度:50px;背景:浅青色; } 页脚{ 最小高度:50px;背景:木瓜鞭; } /* 技巧 */ body{ display:flex;弹性方向:列; } 页脚{ 边距顶部:自动; }
2) 网格
身体{最小高度:100vh;边距:0;显示:网格;网格模板行:自动 1fr 自动; } 标题{ 最小高度:50px;背景:浅青色; } 页脚{ 最小高度:50px;背景:木瓜鞭; }
下面的这个方法使用了一个“技巧”,通过在 body
上放置一个 ::after
伪元素,并将其设置为具有页脚的 精确 高度,因此它将占据完全相同的空间页脚确实如此,所以当页脚 absolute
定位在它上面时,它看起来就像页脚真的占用了空间并消除了它的绝对定位的负面影响(例如,越过正文的内容)
3)位置:绝对(没有动态页脚高度)
身体{最小高度:100vh;边距:0;位置:相对; } 标题{ 最小高度:50px;背景:浅青色; } 页脚{ 背景:木瓜鞭; } /* 技巧:*/ body { position: relative; } body::after { 内容:'';显示:块;高度:50px; /* 设置与页脚高度相同 */ } footer { position: absolute;底部:0;宽度:100%;高度:50px; }
4)表格布局
html{高度:100%; } 身体 { 最小高度:100%;边距:0; } 标题 { 高度:50 像素;背景:浅青色; } 文章 { 高度:1%; } 页脚 { 高度:50 像素;背景:木瓜鞭; } /**** 技巧:****/ body { display: table;宽度:100%; } 正文 > 页脚 { 显示:表格行; }
一个简单的方法是使您的页面的正文 100%
也具有 100%
的 min-height
。如果页脚的高度没有改变,这可以正常工作。
给页脚一个负边距顶部:
footer {
clear: both;
position: relative;
height: 200px;
margin-top: -200px;
}
box-sizing: border-box;
到正文 [和 #container
]。
一个非常简单的跨浏览器效果很好的方法是:
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; }
我用它把我的页脚贴在底部,它对我有用:
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: none
Thanks 来改变正文中显示的内容。它也很好也很简单。
position: fixed; bottom: 0
和这个。这种解决方案是最好的,因为页脚不会粘在底部,而是停留在可滚动页面的末尾。
.footer {max-height: calc(100vh+40px); position: absolute}
以另一种方式看待它。因为它也有效,你应该只知道你的体型。
min-height: calc(100vh - 200px);
与布尔玛,在这里。谢谢!
一个非常简单的 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; } 页脚 { 背景颜色:橙色; }
从 IE7 开始,您可以简单地使用
#footer {
position:fixed;
bottom:0;
}
请参阅 caniuse 以获得支持。
使用 Flexbox 将页脚保持在底部
笔记
确保将所有内容包装在
确保将除页脚元素之外的所有内容都包装在
确保使用
代码说明
min-height: 100vh 确保 body 元素至少伸展到屏幕的全高
flex-direction: column 在保留堆叠的块元素方面保持正常文档流的行为(假设正文的直接子元素实际上都是块元素)。
justify-content:space-between 将页脚推到屏幕底部。
查看如何使用 Bootstrap 5 - Link 执行相同操作(将页脚保持在底部)
我使用的一个简单的解决方案,适用于 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>
然而,另一个非常简单的解决方案是这个:
html, body {
height: 100%;
width: 100%;
margin: 0;
display: table;
}
footer {
background-color: grey;
display: table-row;
height: 0;
}
诀窍是对整个文档使用 display:table
,对页脚使用 display:table-row
和 height:0
。
由于页脚是唯一显示为 table-row
的 body 子项,因此它呈现在页面底部。
height: 100%
,然后当视口比率为 1/1(正方形)时,它实际上是 100%。当视口变宽(横向)高度将大于 100%,如果变窄(纵向)则小于 100%。所以高度与窗口的宽度成正比。试图用另一个包装器解决它,但这没有用。有人得到了解决方案或至少一个提示???
做这个
<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
。谢谢你。
这就是我解决相同问题的方法
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;文本对齐:居中; }
我经常发现自己设计的网站页脚必须位于页面底部,即使内容上面太短了,不能自然地将它推到视口的底部。
但是,如果内容高于用户的视口,那么页脚应该像往常一样从视图中消失,停留在页面底部(不固定到视口)。
如果您知道页脚的高度,那么您应该明确设置它,并将页脚的父元素的底部填充设置为相同的值(或更大,如果你想要一些间距)。
这是为了防止页脚与上面的内容重叠,因为它是从文档流中删除的 position: absolute;
.
这称为粘性页脚。 google search 会产生很多结果。 A CSS Sticky Footer 是我成功使用的那个。但还有更多。
* {边距:0; } html, 身体 { 高度: 100%; } .wrapper { 最小高度:100%;高度:自动!重要;高度:100%;边距:0 自动 -4em; } .footer, .push { 高度:4em; }
你的网站内容在这里。< /p>
需要提防的一件事是移动设备,因为它们以“不寻常”的方式实现了视口的概念:
因此,使用 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;
}
footer {
margin-top:calc(5% + 60px);
}
这工作正常
为我工作。
#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{ 边距顶部:自动; }
我刚刚在这里回答了类似的问题:
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
我自己一直在研究这个问题。我见过很多解决方案,每个解决方案都有问题,通常涉及一些神奇的数字。
因此,使用来自各种来源的最佳实践,我想出了这个解决方案:
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;
}
我的 jQuery 方法,如果页面内容小于窗口高度,则此方法将页脚放在页面底部,否则将页脚放在内容之后:
此外,在其他代码之前将代码保留在自己的外壳中将减少重新定位页脚所需的时间。
(function() {
$('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
我使用 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 确实帮助我解决了这个问题。
使用 Bootstrap 的 ONE line 解决方案
除了提供的所有 CSS 和 jQuery 解决方案之外,
我列出了一个使用 Bootstrap 的解决方案,并在 body 标记上使用单个类声明: d-flex flex-column justify-content-between
这不需要提前知道页脚的高度。
这不需要设置绝对位置。
这适用于在较小屏幕上溢出的动态 div。
html, 身体 { 高度:100%; }
我认为您可以将主要内容设置为视口高度,因此如果内容超出,主要内容的高度将定义页脚的位置
{边距:0;填充:0;宽度:100%; } 身体 { 显示:弹性;弹性方向:列; } 标题 { 高度:50 像素;背景:红色; } 主要 { 背景:蓝色; /* 这是最重要的部分*/ height: 100vh; } 页脚{ 背景:黑色;高度:50px;底部:0; }
您需要使用 position: absolute;
这很重要,然后 bottom:0
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
你可以这样做
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
将 bottom
、left
和 right
设置为 0 的位置 fixed
最适合我:
.footer {
position: fixed;
background : #d1ccc0;
bottom : 0;
left : 0;
right : 0;
height : 50px;
}
位置 absolute
不会粘在底部,但 fixed
会。
虽然我找到了许多类似的答案,但我能找到的唯一解决方案是页脚始终位于底部且未显示在现有数据之上:
footer {
position: relative;
clear: both;
}
只需自定义页脚部分
.footer
{
position: fixed;
bottom: 0;
width: 100%;
padding: 1rem;
text-align: center;
}
<div class="footer">
Footer is always bootom
</div>
<!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 */
}
其实很简单。此解决方案不需要知道页脚高度。
<body>
<div class="app">
Website
</div>
<div class="footer">
Footer
</div>
</body>
.app {
min-height: 100vh;
}
与其他解决方案相比,不需要添加额外的容器。因此,这个解决方案更加优雅。在代码示例下面,我将解释为什么会这样。
<!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。这确保了身体实际上比它的内容更大。
我做了什么
html
<div>
<div class="register">
/* your content*/
</div>
<div class="footer" />
<div/>
CSS
.register {
min-height : calc(100vh - 10rem);
}
.footer {
height: 10rem;
}
不需要使用位置固定和绝对。只需以正确的方式编写html。
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,所以它变得有问题。flexbox
height:100vh
,而是尝试使用min-height:100vh
,在某些情况下,视口上的内容太大,而是将其设置为最小高度。