将footer固定在页面底部

最新推荐文章于 2022-05-25 08:45:01 发布
最新推荐文章于 2022-05-25 08:45:01 发布
阅读量560 收藏
点赞数 1
分类专栏： 前端 CSS 文章标签： 前端 CSS CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jason_first/article/details/79190031
版权
本文介绍了一种确保网页底部footer始终固定在页面底部的方法，通过调整body的高度、main元素的padding-bottom属性及footer的定位来实现。适用于各种屏幕尺寸。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.设置body的高度至少充满整个屏幕，并且body作为footer绝对定位的参考节点；

2.设置main（footer前一个兄弟元素）的padding-bottom的值大于或等于footer的height值，以保证main的内容能够全部显示出来而不被footer遮盖；

3.设置footer绝对定位，并设置height为固定高度值。

<body>
    <header>header</header>
    <main>content</main>
    <footer>footer</footer>
</body>

html {
  height:100%;
}
body {
  min-height:100%;
  margin: 0;
  padding: 0;
  position: relative;
}
header {
  background-color: #000;
}
main {/* main的padding-bottom值要等于或大于footer的height值 */
  padding-bottom: 100px;
  background-color: #333;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: #777;
}


h5开发网站-页面内容不够高时，如何定位footer始终位于页面的最底部
weixin_48596030的博客
09-09 1411
在使用h5开发页面时，会遇到这个情况：当整个页面高度不足以占满显示屏一屏，页脚不是在页面最底部，影响用户视觉。
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
12-14
前言 把 footer 区固定在底部，无论页面高度多宽，它始终在底部不会变，就像移动端的菜单一样。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>document</title> <!-- css --> <style> #demo{ position: fixed; left: 0px; bottom: 0px; width: 100%; height: 50px; background-color: #eee; z-index: 9999; } </style>
footer 固定在底部
也许是前端的博客
03-12 403
// footer位置 function footerUp(){ $('.footer').css({'position':'static'}); var window_h = $(window).outerHeight(); var footer_h = $('.footer').outerHeight(); var footer_t = $('.footer')....
css footer固定在底部
君子-如兰的博客
11-15 724
css footer固定在底部，即有内容footer随着内容的高度撑开，如果内容比较少，就直接显示在屏幕的最下面 实现方式：给父元素设置相对定位并设置最小高度，给子元素设置绝对对位，并bottom等于0即可,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style&g
把footer始终固定在页面底部
weixin_44153063的博客
07-19 1310
使用fixed属性可以实现，但是会使footer悬浮在页面底部 还有其它的方法, 利用padding和margin属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html, body { height: 100%; padding: 0; margi
网站设计:将Footer固定在浏览器底部
WHATIFSO
11-24 1433
在设计网站的时候，如果你某个页面的内容没有满屏，那你的footer会离浏览器底部很远，整体看起来很难看，这里用JavaScript提供一种方法来将footer固定在浏览器底部。 1 function fixFooter(){ 2     var mainHeight = document.getElemen
将footer固定在页面底部的实现方法
06-02
有多种方法可以将footer固定在页面底部，以下是其中的两种常见方法： 1. 使用CSS的position和bottom属性 可以通过设置footer的position为absolute或fixed，再将bottom属性设置为0，来将footer固定在页面底部。例如...
利用CSS使footer固定在页面底部的实例代码
09-24
在网页设计中，保持footer始终固定在页面底部是常见的需求，尤其在内容不足填满整个屏幕时，确保footer不会上浮。本实例将通过CSS实现这一功能，主要涉及的CSS属性包括`margin`, `height`, `min-height`, `position`...
Web前端笔记-footer始终固定在底部及高度缩小时不显示
IT1995的博客
05-25 2681
方法步骤： ①使用css将footer设置到底部； ②使用css响应式当高度小于多少时，不显示。 对应的footer代码如下： <footer id="myFooter" class="text-white" id="myFooter"> <ul class="nav justify-content-center mb-3"> <li class="nav-item"><a href="#" class="nav-link px-2 tex.
让footer固定在底部（转自阮一峰老师博客）
weixin_30484247的博客
12-13 172
可以使用flex布局，让footer固定在底部。有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。 注意的问题：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 //HTML代码如下<body class="Site"> <header>.....
一行代码使footer固定在底部
缓月
02-06 437
  很多网页都有一个footer固定在底部，类似这样： 一行代码固定： min-height: calc(100vh-200px); (这个200px是header和footer的高度.)
页面布局，实现footer永远在底部
08-03
使用html+css来实现传统的页面布局中footer固定在底部
footer固定底部-HTMLCSS方法
jason_lyp的博客
09-19 927
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>footer始终居于底部</title> <style type="text/css"> * { margin:0; padding:0; } body { font:14px/1.8 arial; }/*核心代码，html,body,wrap高度100%*/ html, body
完美解决HTML中footer保持在页面底部问题
热门推荐
NINE-NINE的博客
05-10 11万+
完美解决HTML中footer保持在页面底部问题
如何将页脚（footer）保持在页面底部
码飞_CC的博客
08-24 2万+
文章目录1. 问题描述2. 解决方案2.1 使用position属性实现（兼容较老的浏览器）2.2 使用Flex实现2.3 使用Grid实现 1. 问题描述 将footer保持在视觉窗口的底部是常见的需求。当页面的内容主体高度较大（超出屏幕可视区域的高度）时，footer元素直接跟在内容后面即可。但是，当一个 HTML 页面包含少量的内容时，footer元素就会坐落在页面的中间，在下面留下空白，这看起来很糟糕，尤其是在大屏幕上。 如下图： 2. 解决方案 我们先给出基础的页面代码： <!DOCTYP
如何将footer标签固定在底部_让footer固定在页面底部
weixin_42551508的博客
12-24 3035
最近做了几个触屏版页面，页面比较简单，内容短，但是都有个底部，面对各种机型，底部不是一直处于底部位置，长屏、高分辨率的机子上的表现是悬在半空中，就像一根刺卡在喉咙啊。为此做了几种尝试。其中有个活动的触屏页面只有一个，并且页面上内容固定，所以首先想到的处理方式也比较简单，也很实用。html代码：头部内容底部html代码方面不需要额外增加什么标签，改怎么写就怎么写，处理的重点是css：html,bod...
HTML+CSS底部footer两种固定方式
pan_junbiao的博客
06-20 7630
网页常见的底部栏（footer）目前有两种： 一、永久固定，不管页面的内容有多高，footer一直位于浏览器最底部，适合做移动端底部菜单，这个比较好实现； 二、相对固定，当页面内容高度不沾满浏览器高度，footer显示在浏览器底部，且不会出现滚动条，如果页面内容高度超出浏览器高度，footer则相对与内容的最底部，并且自动出现滚动条； 一、永久固定 <!DOCTYPE html> <html> <head> <meta http-equiv="Co
footer 固定到底部
wuyufei729的博客
10-31 587
#container { /*保证footer是相对于container位置绝对定位*/ position: relative; width: 100%; min-height: 100%; /*设置padding-bottom值大于等于f...
android html footer 固定,footer保持在页面底部的两种方法
weixin_39656853的博客
05-26 211
方法一：footer高度固定+绝对定位思路：footer的父层的最小高度是100%，footer设置成相对于父层位置绝对(absolute)置底(bottom：0)，父层内要预留(padding-bottom)footer的高度。html代码HEADERMAINFOOTERcss代码*{margin: 0;padding: 0;}html,body{height: 100%;}#container...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值