分享一种固定页教在页面底部的方法

这里是固定在页面底部，而不是fixed浏览屏幕的底部。如下

这样的方法有很多，这里分享一种本人用过的。在last内容的div加上padding-bottom。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="css/bootstrap.css" /><style>html,body{padding: 0;margin: 0;height: 100%;width: 100%;}</style></head><body><div style="min-height: 100%;width: 100%;text-align: center;position: relative;"><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div style="padding-bottom: 30px;">内容last</div> <div style="position: absolute;bottom: 0;width: 100%;height: 30px;background: yellowgreen;text-align: center;">页脚</div></div>    </body>
</html>

 注意这里不能把padding-bottom换成margin-bottom，换了不填充满是看不出来的，一旦填充满屏幕后，会导致以下结果，至于原因大概是margin会叠加的缘故。

转载于:https://www.cnblogs.com/xwtcm/p/7466157.html

分享一种固定页教在页面底部的方法相关推荐

如何将footer标签固定在底部_如何将页脚固定在页面底部(多种方法实现)
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果 ...
新分享一种解决ie6下PNG图片透明的方法
IE6中的图片不透明问题一直困扰着广大设计从业者们,前段时间已经分享了一种使用HTC文件解决的方法和使用滤镜使png背景图片透明的方法,今天再分享一种使用脚本代码使PNG图片在IE6中透明的办法. 脚 ...
网页内容高度不够时，让footer处于页面底部的方法(不是固定在底部)
有时候我们的需求是,当页面内容高于可视高度时,footer跟在内容最后,下拉滚动条才会显示. 当页面内容少于一页,footer显示在最底部,而不是跟着内容显示到页面中间或其他位置. 先写好html内容 ...
分享四种将PDF文件转换为CAD文件的方法，总有一个方法适合你
有时候我们会遇到一些设计图是以PDF文件形式显示的,那我们要怎么样将这种类型的PDF图纸转换成dwg或dxf格式呢? 如今网上的转换方法特别多,今天小编就给大家盘点一下将PDF文件转换成CAD图纸的4 ...
淘宝推广引流方法有哪些，分享几种常见的淘宝运营引流方法！
近期,看到一些开淘宝店不挣钱从而放手的盆友,针对淘宝商家而言,是个非常敏感的问题,特别是对于因为财力和经验上的不足,而在某宝挣扎求生的一小店主而言,又是一根刺疼中小店主们心里的利刃. 他们对于某宝整体 ...
前端如何将页脚固定在页面底部
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果 ...
css怎样给网页加页脚,在移动Web页面中使用CSS固定页脚
一种单页应用的页面结构面向移动端的单页应用(Single Page Web Application),从页面代码上来说,会使用较一般网页不同的结构.单页应用并不是说应用只需要一个视图,而是说可以将组 ...
html5页脚最低下,页面底部或内容的页脚，以较低者为准
Ryan Fait的粘性页脚非常好,但我发现它的基本结构缺乏*. Flexbox版本如果你足够幸运,你可以使用flexbox而不需要支持旧的浏览器,粘性页脚变得非常简单,并支持动态大小的页脚. 使用 ...
什么软件可以拍证件照电子版？分享两种拍证件照小妙招
有什么软件可以直接拍出电子版证件照呢?相信大家已经发现现在办理很多业务或者是事情都会使用到证件照,大家的证件照很多都是拍了已经很久了,与现在的差别比较大不能用,又或者是证件照用完了又急需要用证件照,这 ...

分享一种固定页教在页面底部的方法

分享一种固定页教在页面底部的方法相关推荐

最新文章

热门文章