html页脚紧贴页面底部,CSS：页脚紧贴底部

偏执的太偏执、 2022-10-06 04:00 216阅读 0赞

我的练习来源于《CSS揭秘》这本书第7章-41紧贴底部的页脚这部分内容以及书中提到的链接。

方案一

描述：以下方案简单、干净、现代并且没有hack，适用于IE8+, Chrome, Firefox, Opera等浏览器；不需要使用任何标签包裹，因为它是基于可变的body高度；这个解决方案诞生于2012年初，今天也许应该使用更好的方案比如flexbox。

css紧贴底部的页脚

/\*footer紧贴底部的主要代码\*/

html\{

position: relative;

min-height: 100%;

\}

body\{

margin: 0 0 100px;

\}

footer\{

position: absolute;

left: 0;

bottom: 0;

height: 50px;

width: 100%;

background-color: green;/\*设置颜色方便查看footer位置\*/

\}

/\*调整内容的高度以查看footer紧贴底部的效果\*/

.content\{

height: 100px;

\}

方案二

描述：使用display的flex属性

css紧贴底部的页脚

/\*footer紧贴底部的主要代码\*/

body\{

margin: 0;

display: flex;

min-height: 100vh;

flex-direction: column;

\}

footer\{

height: 50px;

width: 100%;

background-color: green;/\*设置颜色方便查看footer位置\*/

\}

.content\{

flex: 1;

\}

方案三

描述：使用 calc()方法

css紧贴底部的页脚

/\*footer紧贴底部的主要代码\*/

body\{

margin: 0;

\}

footer\{

height: 50px;

width: 100%;

background-color: green;/\*设置颜色方便查看footer位置\*/

\}

.content\{

min-height: calc(100vh - 50px);

\}

这个div用来撑高度的

(未完待续……)

参考：

http://mystrd.at/modern-clean-css-sticky-footer/【Modern Clean CSS “Sticky Footer”】

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/【Sticky Footer】

http://blog.sina.com.cn/s/blog\_4c1e6a010102v6jp.html【vh是相对视口的高度】

发表评论取消回复

表情：

评论列表（有 0 条评论，216人围观）

还没有评论，来说两句吧...

相关阅读

相关 html浮动页脚,html之浮动和定位

浮动float 可以让原本不能同时显示在一行的元素显示在一行，定位position 可以让元素位置更精确分为以下几类 . 绝对定位：absolute脱离文档流，相

川长思鸟来/ 2022年10月06日 07:57/ 0 赞/ 161 阅读

相关 html页脚紧贴页面底部,CSS：页脚紧贴底部

我的练习来源于《CSS揭秘》这本书第7章-41紧贴底部的页脚这部分内容以及书中提到的链接。方案一描述：以下方案简单、干净、现代并且没有hack，适用于IE8+, Chr

偏执的太偏执、/ 2022年10月06日 04:00/ 0 赞/ 217 阅读

相关 Sticky Footer 让页脚紧贴页面底部

功能效果：当页面内容不超过当前屏幕高度时，页脚在屏幕的底部；当页面内容过多超过当前屏幕高度时，页脚在内容后面。图片效果演示：当页面内容不超过当前屏幕高度时： ![

一时失言乱红尘/ 2022年07月12日 08:52/ 0 赞/ 263 阅读

相关如何将页脚固定在页面底部

作为一个Web的前端攻城师，在制作页面效果时肯定有碰到下面这种现象：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉

迈不过友情╰/ 2022年06月07日 14:21/ 0 赞/ 410 阅读

相关前端如何将页脚固定在页面底部

作为一个Web的前端攻城师，在制作页面效果时肯定有碰到下面这种现象：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉

阳光穿透心脏的1/2处/ 2022年06月07日 08:35/ 0 赞/ 400 阅读

相关 js页面打印去掉页眉页脚

打印的时候有时间和请求的网址，客户不希望有这样的信息，所以再head中添加 <style type="text/css"> @page \{ margin

╰+攻爆jí腚メ/ 2022年05月29日 09:27/ 0 赞/ 271 阅读

相关让web页面页脚footer固定在页面底部

有时候，我们发现很多页面内容不多的时候，页面底部内容飘到了中间： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aH

野性酷女/ 2022年03月29日 12:08/ 0 赞/ 347 阅读

相关 html 转 pdf 生成页脚

方式一：(生成pdf的时候加) 分享一个 html 转 pdf 生成每页页脚具体自行看源码，我页是在网上找的资料侵权即删 [网盘链接地址][Link 1]

左手的ㄟ右手/ 2022年01月31日 02:41/ 0 赞/ 491 阅读

相关打印html页面，并在每个页面添加页眉和页脚

【方法一】： 1.网页点击打印时，打印渲染的页面每一页的头部都要有公司logo； 2.而且分页时不能让某一行的表格断开（必须在达到固定高度时让页面自动分页）；

我就是我/ 2021年09月19日 10:20/ 0 赞/ 1512 阅读

相关 HTML页脚始终固定在底部

页脚固定在底部分两种情况考虑，一种是有滑动栏的情况，一种是没有的。后者比较简单，直接加上定位属性就是了，但是在页面内容是扩充整个页面以至于可以下滑浏览时，这时候单纯加上定位属

电玩女神/ 2021年06月11日 15:12/ 0 赞/ 1548 阅读