防止页面高度不足，引起的底部上浮问题

可能的问题网站footer部分上浮，可通过css3的方式

html 结构：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0px;padding:0px;}
html{height:100%;}
.site{display:flex;flex-direction:column;min-height: 100%;}

---------------------------------------// 所示橙色部分可用 .site{display:flex;flex-direction:column;min-height: 100vh;} 表示

即是vh的意思：视口被均分为100单位的vh 示例代码: h1 { font-size: 8vh; } 如果视口的高度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100
.header{background:green;height:100px;}-----height:100px;可改为flex-basis：100px；
.main{background:pink;flex:1;} -------------------------------//要理解flex的意思，父元素减去未设置flex的子元素的部分，按照flex分
.footer{height:40px; background:orange;}
</style>
</head>

vh支持情况：

转载于:https://www.cnblogs.com/FineDay/articles/4821799.html

防止页面高度不足，引起的底部上浮问题相关推荐

MUI - 解决弹出输入法时页面高度变小导致底部上浮的问题
MUI - 解决弹出输入法时页面高度变小导致底部上浮的问题参考文章: (1)MUI - 解决弹出输入法时页面高度变小导致底部上浮的问题 (2)https://www.cnblogs.com/phil ...
[html] 写个布局，当页面高度不够时，底部固定在下面，反之不固定
[html] 写个布局,当页面高度不够时,底部固定在下面,反之不固定 <div class="layout"> <header class="heade ...
公众号h5页面高度撑满滚动底部有白边（解决方案）
https://blog.csdn.net/m0_63108819/article/details/123994554https://blog.csdn.net/m0_63108819/article ...
APP里引用H5页面时，高度设置引起的底部白边等问题
H5页面在app里的常见问题: 1.当H5页面高度设置为100%,设置背景色时,发现高度有内容撑开,背景色没有铺满整个背景. 2.当H5页面高度设置为100vh,设置背景色时,背景设能铺满,但是上拉时 ...
HTMl中内容离页面底部距离,CSS 实现内容高度不够的时候底部(footer)自动贴底
在 UI 切图过程中,页面往往由三个部分组成,头部.内容和底部.当页面的内容高度不够撑满屏幕,底部(footer)就跟着内容浮动上来了,小屏幕由于高度有限看不出来异常,但如果是大屏的话,底部下面变会多 ...
html高度没有滚动条,Div扩展了页面高度，但没有滚动条
我在页面左侧有一个div用于导航链接.点击标题可展开链接的子集.我将此div设置为页面高度的100%,以便列占据页面的整个左侧.当所有子类别都展开时,会出现问题. div的内容在页面底部运行,但不添加 ...
CSS3 - footer 固定在底部(无论页面多高始终在底部)
前言把 footer 区固定在底部,无论页面高度多宽,它始终在底部不会变,就像移动端的菜单一样. code <!DOCTYPE html> <html> <head&g ...
JQuery设置页面高度
JQuery设置页面高度开发工具及关键技术:Visual Studio 2017 Html JQuery 撰写时间:2019-02-18 这个功能挺简单的,也就是那么几行代码而已这个功能也挺实用的 ...
判断手机是否弹出键盘，改变了手机页面高度，对应inputStatus的状态改变相关控件的大小和位置
inputResizeBodyHeight() {// 判断手机是否弹出键盘,改变了手机页面高度,对应inputStatus的状态改变相关控件的大小和位置var oldHeight =document ...
关于华为虚拟操作键收起后页面高度不会刷新问题的总结
情况一: 在下图布局下: 头部一个固定的banner图,下部为占满屏幕的一个元素时.开始的思路是获取屏幕的高度减banner的高度,赋值给底部高度.此时,会出现带着虚拟键盘进来,再关闭虚拟键盘,底部留 ...

防止页面高度不足，引起的底部上浮问题

防止页面高度不足，引起的底部上浮问题相关推荐

最新文章

热门文章