如何使用 flex-box 使页脚停留在页面底部
[英]How to make footer stay at bottom of the page with flex-box
问题描述
On iOS Safari when I create a div is a flex item and also make it a flex container, its height does not stretch to match its contents.
在 iOS Safari 上，当我创建一个 div 时，它是一个 flex 项目并使其成为一个 flex 容器，它的高度不会拉伸以匹配它的内容。 However if it is not made a flex container then its height does stretch to match its contents.但是，如果它不是一个弹性容器，那么它的高度会拉伸以匹配它的内容。
To elaborate - I am using css flexbox to place a footer at the bottom of the page.详细说明 - 我正在使用 css flexbox 在页面底部放置页脚。 The page body has two divs - "maincontents" and "footer".页面正文有两个 div——“maincontents”和“footer”。 Even if the "maincontents" div has little or no content, the footer will still stay at the bottom of the window.即使“maincontents” div 的内容很少或没有，页脚仍将停留在窗口底部。 And if the "maincontents" div has a lot of content, it can push the footer down as required.并且如果“maincontents” div 有很多内容，它可以根据需要将页脚向下推。 This idea was easily implemented in flexbox by making the page body a flex container, and setting "maincontents" to "flex:1" and "footer" to "flex:0", so that way "maincontents" takes up all available space while "footer" gets pushed to the bottom of the window.这个想法很容易在 flexbox 中实现，方法是让页面主体成为一个 flex 容器，并将“maincontents”设置为“flex:1”，将“footer”设置为“flex:0”，这样“maincontents”就会占用所有可用空间，同时“页脚”被推到窗口的底部。 It works well on all modern browsers including iOS safari.它适用于所有现代浏览器，包括 iOS Safari。
The problem arises if I also make "maincontents" a flexbox itself (using display:flex).如果我也将“maincontents”本身设置为 flexbox（使用 display:flex），就会出现问题。 On iOS Safari the footer now always stays at the bottom of the window, even if maincontents has a lot of content that should push the footer down further;在 iOS Safari 上，页脚现在总是停留在窗口底部，即使 maincontents 有很多内容应该将页脚进一步向下推； instead "maincontents" ends up continuing underneath "footer" rather than pushing it down.相反，“maincontents”最终会在“footer”下方继续，而不是向下推。
I have made a barebones mockup of this on jsfiddle.我在 jsfiddle 上做了一个准系统模型。 https://jsfiddle.net/8xs1rocu/ https://jsfiddle.net/8xs1rocu/
Here is what you would see if you open that fiddle on a window desktop (chrome/ff/ie11)如果您在窗口桌面 (chrome/ff/ie11) 上打开该小提琴，您会看到以下内容
And here is what you would see if you open it on an ipad or iphone (safari).如果您在 ipad 或 iphone (safari) 上打开它，您会看到以下内容。
Notice that on iOS safari the footer does not get pushed down by the content, and the content instead ends up going under it .请注意，在 iOS safari 上，页脚不会被内容向下推，而是内容最终会进入它的下方。 This does NOT happen on Chrome/FF/IE11 on a desktop;这不会在桌面上的 Chrome/FF/IE11 上发生； on those browsers the footer is pushed down by the contents of "maincontents".在那些浏览器上，页脚被“maincontents”的内容下推。
If you remove the "display:flex" line, then it works perfectly on ios safari too, just as it does on other browsers.如果您删除“display:flex”行，那么它也可以在 ios safari 上完美运行，就像在其他浏览器上一样。 However I need that "display:flex" line because I will be putting other content inside "maincontents" that needs to be laid out a certain way using css flexbox.但是我需要“display:flex”行，因为我会将其他内容放在需要使用 css flexbox 以某种方式布局的“maincontents”中。
Pasting the jsfiddle snippet code directly here:直接在此处粘贴 jsfiddle 代码段：
html, body { height: 100%; display: flex; flex-direction: column; } .maincontents { flex: 1; display: flex; /* if you remove this line it works on Safari */ } .footer { flex: 0; background-color: green; }
<html> <head></head> <body> <div class="maincontents"> Main contents1 <br /> Main contents2 <br /> Main contents3 <br /> Main contents4 <br /> Main contents5 <br /> Main contents6 <br /> Main contents7 <br /> Main contents8 <br /> Main contents9 <br /> Main contents10 <br /> Main contents11 <br /> Main contents12 <br /> </div> <div class="footer"> Footer1 <br /> Footer2 <br /> Footer3 <br /> Footer4 <br /> Footer5 <br /> Footer6 <br /> Footer7 <br /> </div> </body> </html>
4 个解决方案
解决方案1
7 2021-11-10 15:44:21
Just add margin-top: auto;只需添加margin-top: auto; to the footer.到页脚。
That will cause it to stick to the bottom of its container.这将导致它粘在容器的底部。
html, body { height: 100%; display: flex; flex-direction: column; } .maincontents { /* nothing to put here */ } .footer { margin-top: auto; background-color: green; }
<html> <head></head> <body> <div class="maincontents"> Main contents1 <br /> Main contents2 <br /> Main contents3 <br /> Main contents4 <br /> Main contents5 <br /> Main contents6 <br /> Main contents7 <br /> Main contents8 <br /> Main contents9 <br /> Main contents10 <br /> Main contents11 <br /> Main contents12 <br /> </div> <div class="footer"> Footer1 <br /> Footer2 <br /> Footer3 <br /> Footer4 <br /> Footer5 <br /> Footer6 <br /> Footer7 <br /> </div> </body> </html>
解决方案2
2 2019-04-05 20:26:53
Upon further investigation I have found solution to your problem.经过进一步调查，我找到了解决您问题的方法。 With the information I hope you can make the following changes:有了这些信息，我希望您可以进行以下更改：
html, body { height: 100%; width: 100%; } .maincontents { min-height: 100%; display: flex; flex-direction: column; align-items: stretch; } .footer { flex: 0; background-color: green; }
<html> <head></head> <body> <div class="maincontents"> Main contents1 <br /> Main contents2 <br /> Main contents3 <br /> Main contents4 <br /> Main contents5 <br /> Main contents6 <br /> Main contents7 <br /> Main contents8 <br /> Main contents9 <br /> Main contents10 <br /> Main contents11 <br /> Main contents12 <br /> </div> <div class="footer"> Footer1 <br /> Footer2 <br /> Footer3 <br /> Footer4 <br /> Footer5 <br /> Footer6 <br /> Footer7 <br /> </div> </body> </html>
I have tested on safari and Chrome and works as you expect.我已经在 safari 和 Chrome 上进行了测试，并且可以按您的预期工作。 The following is a jsfiddle https://jsfiddle.net/1o3904xh/12/以下是一个jsfiddle https://jsfiddle.net/1o3904xh/12/
I would highly recommend that anyone looking at this to make the footer stay at the bottom of the page and any content to remain above do it like the following way.我强烈建议任何查看此内容以使页脚保持在页面底部并且任何内容保持在上方的人都按照以下方式进行操作。 This is correct semantics which provide increase SEO and accessibility.这是正确的语义，可提供增加的 SEO 和可访问性。 With this layout it should put you in a very good position for your web page.使用这种布局，它应该使您的网页处于非常好的位置。
You can read more about the HTML5 elements here您可以在此处阅读有关 HTML5 元素的更多信息
html, body { width: 100%; height: 100%; } article { min-height: 100%; display: flex; flex-direction: column; align-items: stretch; } main { flex-grow: 1; } header, main, footer { flex-shrink: 0; } .footer { background-color: green; }
<html> <body> <article> <header></header> <main> <div class="maincontents"> Main contents1 <br /> Main contents2 <br /> Main contents3 <br /> Main contents4 <br /> Main contents5 <br /> Main contents6 <br /> Main contents7 <br /> Main contents8 <br /> Main contents9 <br /> Main contents10 <br /> Main contents11 <br /> Main contents12 <br /> Main contents13 <br /> Main contents14 <br /> Main contents15 <br /> Main contents16 <br /> </div> </main> <footer> <div class="footer"> Footer1 <br /> Footer2 <br /> Footer3 <br /> </div> </footer> </article> </body> </html>
Hope this helps you.希望这对您有所帮助。
解决方案3
0 2019-04-06 00:00:56
The solution to make this work in iOS Safari was to add a flex-shrink:0 to the maincontents div.在 iOS Safari 中进行这项工作的解决方案是将 flex-shrink:0 添加到maincontents div。
I changed我变了
.maincontents {
flex: 1;
display: flex;
}
to至
.maincontents {
/* flex: 1*/ /* removed this */
flex-grow: 1; /* added this */
flex-shrink: 0; /* added this */
display: flex;
}
To be honest I am not sure why this worked.老实说，我不确定为什么会这样。 The default flex-shrink value is flex-shrink:1.默认的 flex-shrink 值为 flex-shrink:1。 It would seem that in Safari if a div is both a flex item is also a flex container with flex-shrink:1, then the div will not stretch to fit its contents.在 Safari 中，如果一个 div 既是一个 flex 项目又是一个具有 flex-shrink:1 的 flex 容器，那么 div 将不会拉伸以适应其内容。 This could be a Safari bug, as it does not happen in Firefox/Chrome/IE on a desktop, but it also appears on Opera on the desktop (which is quite odd since Opera uses the same rendering engine as Chrome, which does not have this issue).这可能是一个 Safari 错误，因为它不会发生在桌面上的 Firefox/Chrome/IE 中，但它也会出现在桌面上的 Opera 上（这很奇怪，因为 Opera 使用与 Chrome 相同的渲染引擎，而 Chrome 没有这个问题）。 Maybe someone else can offer an explanation about why this tweak was necessary in Safari and Opera but not in Chrome, Firefox or IE.也许其他人可以解释为什么这个调整在 Safari 和 Opera 中是必要的，而不是在 Chrome、Firefox 或 IE 中。
解决方案4
0 2022-06-16 14:05:51
For anyone looking for an alternative answer that doesn't require setting margin-top: auto;对于任何寻找不需要设置margin-top: auto;的替代答案的人。 on your footer (you may want to set a top margin on your footer at some point, who knows), this has always worked great in my projects.在你的页脚上（你可能想在某个时候在页脚上设置一个上边距，谁知道呢），这在我的项目中一直很有效。
Assuming the following basic layout ( <main> is equivalent to the OP's .maincontents in this case):假设以下基本布局（在这种情况下， <main>等效于 OP 的.maincontents ）：
<html lang="en-US">
<head></head>
<body>
<header></header>
<main>Main content</main>
<footer>Footer content<footer>
</body>
</html>
Simply add the following CSS to your reset:只需将以下 CSS 添加到您的重置中：
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
footer {
flex-shrink: 0;
}
flex-shrink: 0 overrides the default of 1 so the <footer> doesn't shrink while flex: 1 0 auto; flex-shrink: 0覆盖默认值 1，因此<footer>在flex: 1 0 auto;时不会收缩allows <main> to grow to fit the rest of the available space.允许<main>增长以适应剩余的可用空间。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.