【译】粘连 Footer 的 5 种方法 | CSS-Tricks_html/css

首页

web前端

html教程

【译】粘连 Footer 的 5 种方法 | CSS-Tricks_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:46 AM

原文： http://www.zcfy.cc/article/491

一个简短的历史，如果你愿意那样说的话。

粘连 footer 的目的是让它“支撑”在浏览器窗口的底部。但不总是在底部，如果有足够的内容将页面撑开，footer 可以被撑到网页下方去。但是，如果页面的内容很短，粘连 footer 仍然会出现在浏览器窗口的底部。

在 wrapper 上用负的 margin-bottom

用一个元素将除了 footer 之外的其他内容包起来。给它设一个负的 margin-bottom，让它正好等于 footer 的高度。这是一个最基本的方法（例子）。

例子：用负 margin 粘连 footer

<body>  <div class="wrapper">      content    <div class="push"></div>  </div>  <footer class="footer"></footer></body>

html, body {  height: 100%;  margin: 0;}.wrapper {  min-height: 100%;  /* Equal to height of footer */  /* But also accounting for potential margin-bottom of last child */  margin-bottom: -50px;}.footer,.push {  height: 50px;}

这个方法需要在内容区域加一个额外的元素（ .push 元素），这样确保不会因为负 margin 将 footer 提升上来而覆盖了任何实际内容。 .push 元素也最好不要有自己的 margin-bottom，如果有，那么它也得算在负 margin 中，而这又会使得 push 的 height 和 .wrapper 的 margin-bottom 的数字不一样，看起来也不是很好。

用这个技术不需要一个 push 元素，但是相应地，在内容外面需要额外再包一层元素来让它产生对应的 padding-bottom。这也是为了防止负 margin 导致 footer 覆盖任何实际内容。

例子：用负 margin 粘连 footer 2

<body>  <div class="content">    <div class="content-inside">      content    </div>  </div>  <footer class="footer"></footer></body>

html, body {  height: 100%;  margin: 0;}.content {  min-height: 100%;}.content-inside {  padding: 20px;  padding-bottom: 50px;}.footer {  height: 50px;  margin-top: -50px;}

这个技术和前一个有一个同样的缺点，就是它们都需要添加额外的 HTML 元素。

通过 cacl() 减少 wrapper 高度

有一个不需要添加额外元素的方法，那就是通过 cacl() 调整 wrapper 的高度。这样不需要任何附加的元素，只需要两个元素并排共用 100% 高度。

例子： Sticky Footer with calc();

<body>  <div class="content">    content  </div>  <footer class="footer"></footer></body>

.content {  min-height: calc(100vh - 70px);}.footer {  height: 50px;}

注意我这里用 calc() 扣除了 70px，把 footer 固定为 50px。这是假设内容中的最后一个元素有一个 20px 的 margin-bottom。这个 margin-bottom 和 footer 的高度要加在一起从 viewport 高度中扣除。而且，我们在这里还用了 viewport 单位（ vh ——译者注），这是另外一个小技巧，能够避免在让 wrapper 高度为 100% 时还得先把 body 高度设为 100%。

There is flexbox

使用 flexbox

上面三种技术的大问题是它们需要 footer 的高度固定。Web 设计中固定高度通常都不好。内容可能改变。我们需要灵活性。固定高度通常要被亮红灯。使用 flexbox 来实现粘连 footer 不仅不需要任何额外的元素，还可以支持 footer 可变高度。

例子：用 Flexbox 粘连 Footer

<body>  <div class="content">    content  </div>  <footer class="footer"></footer></body>

html {  height: 100%;}body {  min-height: 100%;  display: flex;  flex-direction: column;}.content {  flex: 1;}

你甚至可以添加一个 header 到 .content 前面或者其他更多内容到后面。使用 flexbox 的诀窍是：

设置 flex: 1 在你希望自动填充窗口空间的子元素上（在我们的例子里是 .content 元素）。
或者，可以设置 margin-top:auto 来让子元素尽可能远离它前面的元素（或者根据需要选择任意一个方向的 margin）。（上面的 flex:1 也可以用 margin-bottom:auto ，内容垂直居中可以用 margin:auto 0 ，flex 布局很奇妙吧——译者注）

记得我们有一个关于一切 flexbox 相关内容的完整的指南。

使用 grid

Grid 布局是一种更新的技术（目前支持它的浏览器比 flexbox 更少）。我们也有一个关于它的完整的指南。用它实现粘连 footer 也相当容易。

例子：用 Grid 粘连 footer

<body>  <div class="content">    content  </div>  <footer class="footer"></footer></body>

html {  height: 100%;}body {  min-height: 100%;  display: grid;  grid-template-rows: 1fr auto;}.footer {  grid-row-start: 2;  grid-row-end: 3;}

这个例子只能在 Chrome Canary 或者 Firefox 开发版上工作，并且可能在 Edge 下被降级到旧的 grid 布局版本。

英文原文： https://css-tricks.com/couple-takes-sticky-footer/

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。