方法一：全局增加一个负值下边距等于底部高度

html, body {

height: 100%;

margin: 0;

}

.content {

padding: 20px;

min-height: 100%;

margin: 0 auto -50px;

}

.footer,.push {

height: 50px;

}

Sticky Footer with Negative Margin 1

Add Content

Footer

方法二：底部元素增加负值上边距

html, body {

height: 100%;

margin: 0;

}

.content {

min-height: 100%;

}

.content-inside {

padding: 20px;

padding-bottom: 50px;

}

.footer {

height: 50px;

margin-top: -50px;

}

body {

font: 16px Sans-Serif;

}

h1 {

margin: 0 0 20px 0;

}

p {

margin: 20px 0 0 0;

}

footer {

background: #42A5F5;

color: white;

line-height: 50px;

padding: 0 20px;

}

Sticky Footer with Negative Margin 2

Add Content

Footer

方法三：使用calc()计算内容的高度

.content {

min-height: calc(100vh - 70px);

padding: 40px 40px 0 40px;

}

.footer {

height: 50px;

}

* {

box-sizing: border-box;

}

body {

margin: 0;

font: 16px Sans-Serif;

}

h1 {

margin: 0 0 20px 0;

}

p {

margin: 0 0 20px 0;

}

footer {

background: #42A5F5;

color: white;

line-height: 50px;

padding: 0 20px;

}

Sticky Footer with calc()

Add Content

Footer

方法四：使用flexbox

html {

height: 100%;

}

body {

min-height: 100%;

display: flex;

flex-direction: column;

}

.content {

flex: 1;

padding: 20px;

}

.footer {

padding: 20px;

}

Sticky Footer with Flexbox

Add Content

Footer

方法五：使用grid布局

html {

height: 100%;

}

body {

min-height: 100%;

display: grid;

grid-template-rows: 1fr auto;

}

.content {

padding: 20px;

}

.footer {

grid-row-start: 2;

grid-row-end: 3;

}

* {

box-sizing: border-box;

}

body {

margin: 0;

font: 16px Sans-Serif;

}

h1 {

margin: 0 0 20px 0;

}

p {

margin: 0 0 20px 0;

}

.footer {

background: #42A5F5;

color: white;

padding: 20px;

}

Sticky Footer with Grid

Add Content

Footer

flex 底部固定_div 底部固定方法（不用position定位）相关推荐

html固定页脚布局及样式,html页脚固定在底部的方法
html { height: 100%; } body { height: 100%; margin: 0; padding: 0; } .container, .jumbotron { min-he ...
如何将footer标签固定在底部_如何将页脚固定在页面底部(多种方法实现)
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果 ...
android按钮在容器下方,使用flex布局解决安卓手机上固定在底部的按钮，在键盘弹起后挡住input输入框的问题...
移动端经常会出现,一个表单里面,确定按钮固定在底部这样的布局,一般会让按钮absolute或者fixed,这样在ios上没有问题,但是在安卓手机上,当表单里面的input输入框获得焦点的时候,按钮会挡 ...
如何将footer标签固定在底部_div footer标签css实现位于页面底部固定
作为一个页面仔你一定遇到过:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看 ...
uniapp 实现聊天页面 textarea固定在底部且高度自增
在使用uniapp实现一个IM即时通讯系统的时候聊天界面是十分重要的,参考微信QQ的界面,决定模仿一个差不多的出来. 对于消息内容,肯定就是使用scroll-view组件了,发送消息的输入框则固定在底 ...
H5移动端div固定到底部实现底部导航条的几种方式
H5移动端div固定到底部实现底部导航条的几种方式需求: 需要把导航固定在底部?只能滑动内容,导航菜单固定不动的.效果如下: 这篇文章主要讲解三种实现方案,包括:fixed,absolute,以及c ...
css属性基础以及wxss——居中，渐变色边框，圆角边框，横向布局，重叠div，div固定在底部，input的无边框显示下划线
text-align: center;--子item居中对齐 display: flex;--子item横向布局 -webkit-justify-content: center;--子item居中 m ...
安卓和iOS的兼容性问题：键盘弹起时，固定在底部的按钮是否被弹到键盘上方
问题描述: iOS不存在固定在底部的按钮被键盘弹起的问题,该问题出现在安卓手机上,如下图解决方法: 1. 当键盘弹起时可以监听窗口变化(window.onresize 监听窗口变化) 2. 窗口发生 ...
android html footer 固定,HTML5+CSS把footer固定在底部
在刚开始给网页写footer的时候,我们会碰到一个让人烦躁的问题:当页面内容太少时,footer显示在了页面中间,这是我们不希望出现的,我们希望它能够永远呆在底部,不管网页的内容是多还是少.下面的代码 ...

flex 底部固定_div 底部固定方法（不用position定位）

Sticky Footer with Negative Margin 1

Sticky Footer with Negative Margin 2

Sticky Footer with calc()

Sticky Footer with Flexbox

Sticky Footer with Grid

flex 底部固定_div 底部固定方法（不用position定位）相关推荐

最新文章

热门文章