一尘不染

高度未知的CSS粘性页脚

css

有什么方法可以使用CSS将页脚粘贴到浏览器屏幕的底部或紧随内容之后(取决于哪个较长), 而无需 提前知道页脚的大小?

现在,我在容器中使用绝对位置,该容器中放置页脚,并且容器的最小高度为100%,但是如果更改页脚,我必须更改容器底部的填充以匹配其高度。


阅读 316

收藏
2020-05-16

共1个答案

一尘不染

摘要:

对于具有页眉,内容区域和页脚的网站:

  1. html, body {height: 100%;}
  2. 将您的身体(或包装div)设置为 display: table; width: 100%; height: 100%;
  3. 将页眉,页脚和内容区域设置为display: table-row;。给您的页眉和页脚height: 1px;,并给您的内容区域height: auto;

页眉和页脚都将扩展以适合其内容。内容区域将扩展以适合其较大的内容或可用空间。

2020-05-16