css使页脚始终居于页面底部

 时间:2024-10-13 09:07:34

1、先贴上页面代码,可以在#content添加内容,内容多或少,#footer页脚始终都会处于页面底部。<body媪青怍牙> <div id="Container"> <div id="header">header</div> <div id="content">body</div> <div id="footer">footer</div> </div> <style> *{ margin:0; padding:0; } #Container{ display: flex; min-height: 100vh; flex-direction: column; border:2px solid #fff3cd; } #header{ min-height: 50px; border:2px solid #1c7430; } #content{ flex: 1; border:2px solid #f5c6cb; } #footer{ min-height: 50px; border:2px solid #fd7e14; } </style></body>

2、看看效果

css使页脚始终居于页面底部

3、flex属于css3样式,主流浏览器新版本基本都支持,有使用疑惑的可以网上搜,很多。亲测,手写,如果对你有用就点个赞吧!

  • 让TOMCAT支持中文路径与中文文件名
  • IntelliJ IDEA数据库如何设置所有项目都能看到
  • 如何从css样式表里设置表格内文字居顶端
  • jdbc连接数据库之修改
  • 获取datagrid某一行(row)各个字段值
  • 热门搜索
    阆中旅游攻略 希腊旅游攻略 蚂蜂窝旅游网 江西旅游商贸 国内旅游景点推荐 阆中旅游 北戴河旅游景点有哪些 公司旅游 广西旅游地图 南充旅游