html底部沉底显示,Footer部分永远沉底。

那么如何将Web页面的 “footer”部分永远固定在页面的底部呢？(注意了这里所说的是页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部)

就是当内容只有一点点时，Web页面显示在浏览器底部，当内容高度超过浏览器高度时，Web页面的footer部分在页面的底部，总而言之Web页面的footer部分永远在页面的底部，也就是，Footer部分永远沉底。

方法

1. HTML结构：

内容

2. CSS代码：

* {

padding: 0;

margin: 0;

list-style: none;

}

html,

body {

height: 100%;

}

#container {

height: 100%;

background-color: red;

overflow-x: hidden;

}

.content {

position: relative;

min-height: 100%;

background-color: yellow;

padding-bottom: 70px;

box-sizing: border-box;

}

.footer {

position: absolute;

left: 0;

bottom: 0;

width: 100%;

height: 70px;

background-color: blue;

}

内容

原理

和

标签：html和body标签中必须将高度(height)设置为“100%”,这样我们就可以在容器上设置百分比高度。同时需要将html,body的margin和padding都移除，也就是html,body的margin和padding都为0。

div#container容器：div#container容器将高度(height)设置为“100%”;overflow-x: hidden;，好让内容在container容器内滚动。

div.content容器：div.content容器必须设置一个最小高度(min-height)为100％，这主要使他在内容很少(或没有内容)情况下，能保持100％的高度。另外我们还需要在div.content容器中设置一个"position:relative"以便于里面的元素进行绝对定位。再有就是设置一个padding-bottom值，而且这个值要等于(或略大于)页脚div.footer的高度(height)值。

div.footer容器：div.footer容器必须设置一个固定高度。div.footer还需要进行绝对定位，并且设置bottom:0，让div.footer固定在容器div.content的底部。这样就可以实现我们前面所说的效果，当内容只有一点时，div.footer固定在屏幕的底部(因为div.content设置了一个min-height:100%)，当内容高度超过屏幕的高度，div.footer也固定在div.content底部，也就是固定在页面的底部。

html底部沉底显示,Footer部分永远沉底。相关推荐

微信付费进群收费进群系统源码底部会显示价格（可自定义）入群
正文: 源码的功能其实就是一个单独的页面在上面你可以在后台自定义你的内容底部会显示9.9(可自定义)入群.当然也可以加价,也可以换别的,不只是进群还可以修改付费获得某项资源,搭建自己集思广益啦, ...
PyQt5随笔：QTextEdit、QTextBrowser添加的文字超出视图后，滑动条自动移至最底部，显示最新文本解决
PyQt5随笔:QTextEdit.QTextBrowser添加的文字超出视图后,滑动条自动移至最底部,显示最新文本解决 1.前言 QTextEdit/QTextBrowser设置文本的简单函数:se ...
odoo自定义按钮覆盖原来的底部按钮以及footer标签覆盖问题
问题: odoo自身定义了底部和顶部的按钮,底部按钮定义在footer标签中.当想要覆盖odoo本来的底部按钮时,只需要自定义一个footer标签就可以 ** 解决办法:自定义footer标签在模型 ...
html里按钮始终在底部,详解footer始终位于网页底部的方法介绍
上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面..而且有的页面内容少的话不能把尾部挤到最下面,所以, ...
解决MSChart底部横坐标显示不全的问题
还是这个MSChart,先前做一个test的时候都正常,正式用的时候出现这样一个问题,绑定数据之后,如果x轴坐标过多,会显示不全,我这里的情况是底部坐标一般最多显示八九个,再多了就隔一个显示一个,或者 ...
CSS绝对底部布局 Sticky footer
何为Sticky footer布局? 我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分.当页头区和内容区的内容较少时,页脚区不是随着内 ...
如何将footer标签固定在底部_让footer固定在页面底部
最近做了几个触屏版页面,页面比较简单,内容短,但是都有个底部,面对各种机型,底部不是一直处于底部位置,长屏.高分辨率的机子上的表现是悬在半空中,就像一根刺卡在喉咙啊.为此做了几种尝试. 其中有个活动的 ...
计算机桌面底部不显示了,为什么电脑底部不会显示出来怎么办
1. 电脑桌面下方任务栏没了,怎么恢复 1.出现问题现象,是打开过很多任务.但是任务栏就是不显示打开的项目,但是用TAB+ALT 或者任务管理器应用程序里面可以看到任务项目. 2.找到任务栏,右键& ...
SWT带垂直滚动条的Text自动滚动到底部(比如显示聊天信息)
Text chatMessage = new Text(group, SWT.BORDER | SWT.WRAP | SWT.V_SCROLL | SWT.READ_ONLY); chatMessag ...

html底部沉底显示,Footer部分永远沉底。

html底部沉底显示,Footer部分永远沉底。相关推荐

最新文章

热门文章