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

最新推荐文章于 2024-08-23 09:58:09 发布

luffy5459

最新推荐文章于 2024-08-23 09:58:09 发布

阅读量6k

点赞数 3

分类专栏： Web前端文章标签： css layout fix footer

本文链接：https://blog.csdn.net/feinifi/article/details/86082096

版权

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

这个页面底部没有固定，结果...，一个前端工程师是无法接受这样的结果的。

这里介绍一种通用的解决办法，让页面底部固定。

思路：首先需要一个容器包裹所有的页面元素，这里使用<div id="container"></div>来做。id为container的容器需要设置高度100%,否则，当内容较少的时候，还是会飘起来。最后，主要的是footer底部元素需要绝对定位，让他固定在底部。

下面直接上代码：

content.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>layout</title>
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/public.css">
</head>
<body>
	<div id="container">

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

luffy5459

关注关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

html5如何使页脚置底,CSS如何让页脚固定在页面底部

weixin_36376879的博客

06-03

1559

在进行Web开发实现页面时，可能会遇到这样一种场景：将页脚footer固定在页面的底部，如果页面的主体不能充满屏幕高度，则footer位于屏幕的底部；如果页面的主体超出了屏幕高度，则footer始终位于页面底部。场景的示意如下图，那么如何将页脚始终固定在页面底部呢？一般来说，有两类方法可以达到此目的，一种是仅仅使用css技巧并配合特定的html结构；另一种是使用js代码操作dom元素。本文将介绍三...

web前端入门到实战：CSS页面底部固定的6种方法

软件开发-前端开发-IT

08-17

2102

当我们在写页面时经常会遇到页面内容少的时候，footer会戳在页面中间或什么？反正就是不在最底部显示，反正就是很难看，下面要讲的布局就是解决如何使元素粘住浏览器底部，方法一：footer高度固定+绝对定位 html <div class="dui-container"> <header>Header</header> <main>Content&...

参与评论您还未登录，请先登录后发表或查看评论

详解八种方法实现CSS页面底部固定

09-22

主要介绍了详解八种方法实现CSS页面底部固定的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

把footer始终固定在页面底部

weixin_44153063的博客

07-19

1249

使用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＞置底

最新发布

zheshiyangyang的博客

08-23

1582

我们制作网页时，少不了会给网页制作底部，用来注明作者信息也好，底部导航栏也好。最近作者在制作个人网站，制作网页底部踩了不少坑，因此来分享一下经验。

Web前端笔记-footer始终固定在底部及高度缩小时不显示

IT1995的博客

05-25

2624

方法步骤： ①使用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.

css 解决-如何让Footer始终固定在页面底部

L_C_sunny的博客

11-26

1915

有这样一个需求：当页面内容高度小于屏幕高度时，Footer固定在屏幕底部；当页面内容高度大于屏幕高度时，Footer固定在页面底部，即：跟随在内容尾部，滚动条到最底部时看到。解决方案第一种： html { position: relative; min-height: 100%; } body { margin-bottom: 60px; } footer { position: absolute; bottom: 0; width: 100

如何将footer标签固定在底部_让footer固定在页面底部

weixin_42551508的博客

12-24

2979

最近做了几个触屏版页面，页面比较简单，内容短，但是都有个底部，面对各种机型，底部不是一直处于底部位置，长屏、高分辨率的机子上的表现是悬在半空中，就像一根刺卡在喉咙啊。为此做了几种尝试。其中有个活动的触屏页面只有一个，并且页面上内容固定，所以首先想到的处理方式也比较简单，也很实用。html代码：头部内容底部html代码方面不需要额外增加什么标签，改怎么写就怎么写，处理的重点是css：html,bod...

Web页中页脚（Footer）贴底实现（兼容IE6/7/8, FF3）

weixin_33859844的博客

10-07

254

作者：Tony Qu 最近有个需求，要求让页脚贴底，一开始采用了绝对位置的footer方案（设置footer的top），虽然可以应付大部分情况，但有的时候由于页面不规范，会导致计算出来的高度值太小，导致底部上浮；有的时候甚至会叠在页面内容之上。我们原本在onmouseup, onresize, onload中进行计算，但由于系统的庞大，往往会有一些层的onmouseup事件...

如何将页脚固定在页面底部(多种方法实现)

09-22

在Web开发过程中，确保页脚（footer）始终固定在页面底部是一种常见的需求。当网页内容不足以填满整个浏览器视窗时，页脚可能会飘在页面中间，这会影响用户体验和页面的整体美观。本文将介绍几种固定页脚在页面底部...

将footer固定在页面底部

JasonCeng_的博客

01-28

512

1.设置body的高度至少充满整个屏幕，并且body作为footer绝对定位的参考节点； 2.设置main（footer前一个兄弟元素）的padding-bottom的值大于或等于footer的height值，以保证main的内容能够全部显示出来而不被footer遮盖； 3.设置footer绝对定位，并设置height为固定高度值。 header content

网页固定底部footer

weixin_42569808的博客

05-23

316

一、使用flex布局 <div class="g-container"> <div class="g-real-box"></div> <div class="g-footer"></div> </div> .g-container{ height: 100vh; display: flex; flex-...

如何构建一个很棒网站页脚（Website Footer）

weixin_30535565的博客

03-12

695

　　对于很多人来说，制作页脚是只是设计师顺手而为的任务。它似乎很容易，似乎可以忽略不计。因为很多人都觉得网站底部很少人会去看，而且页脚链接的所有链接的点击率（CTR）都是最低的，何必呢？　　真是这样的吗？下面为您解析。页脚 & CTR（点击率） Well, the fact about the low CTR may be true, but it doesn’t present...

html页脚固定,jQuery实现页脚永远固定在页面底部

weixin_42293447的博客

06-03

931

使用下面的jQuery代码，可以轻松的帮我们实现页脚永远固定在页面底部(即页脚永远固定在页面的底部，而非永远固定在浏览器窗口的底部，换句话说，就说当页面主内容没有显示屏幕高时，页脚固定在显示器屏幕的底部，但当页面内容超过显示器屏幕高度时，页脚又会跟随内容往下沉，但页脚都永远固定在页的底部)，使用这种方法有几个地方需要注意：1. 确保正常引入了jQuery版本库，并正常调入了上面那段jQuery代码...

让网页的页脚始终待在最下方

web前端开发

02-29

5770

html和body的高度并不一定相同，在内容少的时候，body的高度要小于html，当然这只会出现在body中的内容所占的空间高度小于浏览器的视口高度的时候，此时html的高度大于body的高度。网页中的元素都是以body最为参考，所以有必要保持html和body的高度相同。html,body{height:100%;} 第一种方法：在body中使用两个容器，包括网页的页脚和另外一部分（co

将HTML页面页脚固定在页面底部(多种方法实现)

weixin_33949359的博客

02-18

7233

　　当一个HTML页面中含有较少的内容时，Web页面的footer部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，接下来为大家介绍下如何将页脚固定在页面底部，感兴趣的朋友可以了解下　作为一个Web的前端工作者学习者，在制作页面效果时肯定有碰到下面这种现象：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极...

30 超大的时尚Web页脚布局

coderidea

02-15

271

设计工作中页脚布局是很困难的。有这么多的样式和属性，包括列，链接列表，署名和自定义的插图。我个人最喜欢的趋势是超大的布局风格，留下足够的空间自定义链接菜单。因此，我收集了30超大时尚网站页脚设计。 Branded07 Ready Made Designs FudgeGraphics Frisk Design Design Bombs D...

饿了么webapp之css footer的实现

chiuwingyan的博客

10-21

852

效果图：如果内容的高度没有屏幕大小这么高，关闭按钮在底部这个位置。如果内容高度超过屏幕大小，会有会有滚动条并且关闭按钮始终位于页面最顶部。实现方法 none .detail position:fixed z-index:100 top: 0

JS实现让页脚一直固定在页面底部

weixin_33910137的博客

11-18

670

2019独角兽企业重金招聘Python工程师标准>>> ...

在移动Web单页应用中实现固定页脚

asd131531的专栏

01-04

1154

一种单页应用的页面结构面向移动端的单页应用（Single Page Web Application），从页面代码上来说，会使用较一般网页不同的结构。单页应用并不是说应用只需要一个视图，而是说可以将组成应用的多个视图集合在一个网页内呈现，且在视图之间能够自由切换（平滑的动画形式居多）。我制作单页应用使用的是一种常见方法，像下面这样： .v