通过calc

一个全局的元素a包含除了底部之外的所有内容，设置a元素的最小高度为body高度减去foot高度。

<style>body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, table, td, img, div {margin: 0;padding: 0;border: 0;}html {-webkit-text-size-adjust: 100%;}body, html {width: 100%;max-width: 750px;margin: 0 auto;height: 100%;background: red;overflow-x: hidden;}.main {min-height: calc(100% - 50px);}.foot {width: 100%;height: 50px;background: yellow;position: fixed;bottom: 0;}</style>
<body>
<div class="main"><span><img src="data:images/1.jpg"></span><span><img src="data:images/2.jpg"></span><span><img src="data:images/3.jpg"></span><span><img src="data:images/4.jpg"></span>
</div>
<footer class="foot"></footer>

通过marginBottom,paddingBottom

一个全局的元素a包含除了底部之外的所有内容，设置a元素的最小高度为body高度为100%，marginBottom或者paddingBottom为foot的高度

<style>body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, table, td, img, div {margin: 0;padding: 0;border: 0;}html {-webkit-text-size-adjust: 100%;height: 100%;}body {width: 100%;margin: 0 auto;height: 100%;overflow-x: hidden;background: red;}.wrapper{min-height: 100%;margin-bottom: 50px;}.footer{height: 50px;}.footer{width: 100%;  background: yellow;position: fixed;bottom: 0;}</style>
<body>
<div class="wrapper"><div class="main"><span><img src="data:images/1.jpg"></span><span><img src="data:images/2.jpg"></span><span><img src="data:images/1.jpg"></span><span><img src="data:images/2.jpg"></span><span><img src="data:images/2.jpg"></span></div></div><footer class="footer"></footer>

foot元素一直浮在底层相关推荐

foot元素内容未满或超过一页都底部显示
全局增加一个负值下边距等于底部高度一个全局的元素a包含除了底部之外的所有内容,a元素最小高度为100%,设置a元素的负值下边距等于foot高度,然后在a元素设置两个平级元素c d.其中d高度等于fo ...
STL源码剖析 stack 栈概述-＞（使用deque双端队列 / list链表）作为stack的底层容器
Stack是一种先进后出的数据结构,他只有一个出口 stack允许新增元素.移除元素.取得最顶端的元素,但是无法获得stack的内部数据,因此satck没有遍历行为 Stack定义的完整列表 (双端 ...
使用foreach循环遍历集合元素
使用foreach循环遍历集合元素 Java5.0 提供了foreach循环迭代访问Collection和数组遍历操作不需要获取Collection或数组的长度,无需使用索引访问元素遍历集合的底层 ...
LinkedList理解（2）元素删除
上一篇文章我们说了LinkedList,并说了往里添加了元素.这篇文章我们来说说LinkedList元素的删除,话不多说,上代码,还是那个Person类还是那两个属性,name,age,提供了一些简 ...
Arraylist理解（3）删除元素
第三次强调,ArrayLIst是一个普通的类. 好,现在我们来讨论一下数组的删除,我们知道数组一但在堆内存中创建出来,数组长度是不可变的,看以下源码: 添加10个用户比如我们要把"周八&q ...
HashMap底层理解（上）
本来想先在专栏里简单的说一下二叉树,红黑树的内容后再说HashMap的,但看到评论区里不断的出现HashMap这个词,怕大家等得着急,本篇文章就先说说HashMap吧,前面讲ArrayList和Lin ...
学习了Redis的五大数据类型，其底层实现你了解吗？
文章目录 String底层 List底层 Hash底层 Set底层 Zset底层 String底层 String的底层并不是简单的C字符串简单动态字符串(Simple Dynamic String,S ...
从文档流角度理解浏览器页面渲染引擎对元素定位的解析
文档流:将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为文档流. 我们在排列元素时,遵循"流式结构",即元素遵循从上向下,从左向右堆叠的规则,所以我们在排列元素 ...
ArrayList如何实现增删元素及其缺陷
ArrayList提供如下构造方法: public ArrayList(int initialCapacity) {if (initialCapacity > 0) {this.elementD ...

foot元素一直浮在底层

通过calc

通过marginBottom,paddingBottom

foot元素一直浮在底层相关推荐

最新文章

热门文章