CSS未知高度的粘滞页脚 [英] CSS Sticky Footers with Unknown Height

问题描述

有没有办法将页脚粘贴到浏览器屏幕底部或内容之后（具体取决于哪个更长）使用CSS 而不预先知道页脚的大小？

现在我使用容器中的绝对定位，容器的页脚和容器的最小高度的内容为100％，但如果我更改页脚，我发现我必须更改容器底部的填充以匹配其高度。

解决方案

http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/

摘要：

区域和页脚：

1. 设置 html，body {height：100％;}


2. 将您的正文（或封装div）设置为 display：table;宽度：100％;将页眉，页脚和内容区域设置为 display：table-row;
code>。给你的页眉和页脚 height：1px; ，并给你的内容区域 height：auto;




页眉和页脚都将展开以适合其内容。

https://jsfiddle.net/0cx30dqf/

Is there any way to stick a footer to the bottom of the browser screen or right after the content (depending on which is longer) using CSS without knowing the size of the footer in advance?

Right now I am using the absolute positioning in a container that holds the footer and the content with container's min-height as 100%, but if I change the footer I find I must change the padding at the bottom of the container to match its height.

解决方案

http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/

Summary:

For a site with a header, content area, and footer:

1. Set html, body {height: 100%;}
2. Set your body (or a wrapper div) to display: table; width: 100%; height: 100%;

3. Set your header, footer, and content area to display: table-row;. Give your header and footer height: 1px;, and give your content area height: auto;

   The header and footer will both expand to fit their content. The content area will expand to fit the larger of its content, or the available space.

https://jsfiddle.net/0cx30dqf/

这篇关于CSS未知高度的粘滞页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！