做网站网页需要什么软件,sae wordpress 图片插件,专业网站建设品牌策划,wordpress 4.9 多站中间内容高度不够屏幕高度撑不开的页面时候#xff0c;页面footer部分都能保持在网页页脚#xff08;最底部#xff09;的方法
1、首先上图看显示效果 2、奉上源码
2.1、html部分
bodyheader头部/headermain主区域/mainfoot…中间内容高度不够屏幕高度撑不开的页面时候页面footer部分都能保持在网页页脚最底部的方法
1、首先上图看显示效果 2、奉上源码
2.1、html部分
bodyheader头部/headermain主区域/mainfooter底部/footer
/body
2.2、css部分
stylehtml, body {margin: 0;padding: 0;width: 100%;height: 100%;}body {min-height: 100vh;display: flex;flex-direction: column;}header {background: aquamarine;height: 40px;line-height: 40px;text-align: center;}footer {margin-top: auto;background: aquamarine;height: 50px;line-height: 50px;text-align: center;}main {align-self: center;/* 或者使用如下也可实现main区域居中显示 *//* margin: 0 auto; */background: aqua;width: 80%;}/style
3、全部代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleflexbox布局/titlestylehtml, body {margin: 0;padding: 0;width: 100%;height: 100%;}body {min-height: 100vh;display: flex;flex-direction: column;}header {background: aquamarine;height: 40px;line-height: 40px;text-align: center;}footer {margin-top: auto;background: aquamarine;height: 50px;line-height: 50px;text-align: center;}main {align-self: center;background: aqua;width: 80%;}/style
/head
bodyheader头部/headermain主区域/mainfooter底部/footer
/body
/html4、原理 1、首先我们确保 body 元素至少会拉伸到屏幕的整个高度 min-height: 100vh 。如果内容较短某些移动浏览器除外这不会触发溢出并且它将允许内容根据需要继续拉伸高度。 2、设置 flex-direction: column 在保留堆叠块元素方面保持正常文档流的行为假设所有 body 块元素的直接子元素确实都是块元素。 3、flexbox 的优势在于利用该 margin: auto 行为。这个奇怪的伎俩将导致边距填充它所设置的项目与其在相应方向上最近的兄弟姐妹之间的任何空间。设置 margin-top: auto 会有效地将页脚推到屏幕底部。 5、缺陷 main区域不能自动高度填充
