通过css实现-让页面的footer始终位于底部

news/2024/11/7 9:31:03/

当页面内容全部占满时,滑动到最下面,显示footer在底部;
当页面内容不满时,footer也是在最底部显示。
具体实现代码如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>* {margin: 0;padding: 0;}html,body {height: 100%;}.page {display: flex;flex-direction: column;height: 100%;}header {background: green;flex: 0 0 auto;}.content {background: #ccc;flex: 1 0 auto;}footer {background: green;flex: 0 0 auto;}</style></head><body><body><div class="page"><header> 头部 </header><div class="content">这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!</div><footer> 底部 </footer></div></body></body>
</html>

http://www.ppmy.cn/news/884452.html

相关文章

手写对象浅比较(React中pureComponent和Component区别)

PureComponent和Component的区别 PureComponent会给类组件默认加一个shouldComponentUpdate这样的周期函数 //PureComponent类似自动加了这段shouldComponentUpdate(nextProps,nextState){let { props, state } this;// props/state:修改之前的属性状态// nextProps/nextState…

edem2018失败?电脑名显示no-net导致许可证不能添加

此时&#xff0c;是系统的用户变量缺失&#xff0c;解决方案如下&#xff1a; 就可以完美运行啦&#xff01;&#xff01;&#xff01;

打开Visual Studio提示“无效的许可证书,需要重新安装”的解决方法

我是因为卸载office后&#xff0c;visual studio就用不了。点击之后弹出“无效的许可证书&#xff0c;需要重新安装”。 注册vs有一个独立的工具&#xff0c;对于vs2015&#xff0c;在C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\DDConfigCA.exe&#x…

VS2019 无法登录 许可证已过期 无法下载许可证

许可证已过期 点击检查更新的许可证&#xff0c;报出错误&#xff1a;我们无法下载许可证&#xff0c;请检查你的网络连接或代理设置 解决方法 其实问题就在于嵌入式web浏览器的问题&#xff0c;选择账户选项-》账户-》登录选项-》将嵌入式web浏览器改为系统web浏览器。随后就…

solidwork2019/2020安装后出现无法获得许可证

解决方案&#xff1a;1、将SolidSQUAD_下Program Files和Program Files&#xff08;x86&#xff09;中所有内容拷贝到系统C盘对应的文件夹中&#xff08;这一步在通常安装教程中没有&#xff09;2、将C:\Program Files\SOLIDWORKS Corp\SOLIDWORKS里的netapi32.dll文件复制到安…

VS2010出现“无效的许可证数据,需重新安装”

1. 找到 安装路径下Microsoft Visual Studio 10.0\Common7\IDE\DDConfigCA.exe ,使用管理员权限运行该exe文件&#xff0c; 等待自然推出&#xff1b; 2. 重启VS&#xff0c;重新输入产品密钥 &#xff0c; VS2010专业版&#xff08;or旗舰版&#xff09;密钥&#xff1a;YCFHQ…

怎样解决PowerDesigner15出现许可证过期问题?

打开PowerDesigner软件&#xff0c;出现许可证过期问题&#xff0c;解决方法&#xff1a; 1.打开软件安装路径&#xff08;右击软件&#xff0c;点击打开文件所在位置即可&#xff09; 2.下载破解PowerDesigner版本的补丁&#xff08;powerDesigner15.116.5破解补丁.rar&#…

Visual Studio 2019许可证授权

Visual Studio 2019许可证如下&#xff0c;亲测有效&#xff1a; Visual Studio 2019 Enterprise&#xff08;企业版&#xff09; BF8Y8-GN2QH-T84XB-QVY3B-RC4DFVisual Studio 2019 Professional&#xff08;专业版&#xff09; NYWVH-HT4XC-R2WYW-9Y3CM-X4V3Y