• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 使用div+CSS将页脚始终控制在页面最下方的方法

使用div+CSS将页脚始终控制在页面最下方的方法

作者:zxsrendong 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含div,CSS,页脚等相关知识,zxsrendong 希望在学习及工作中可以帮助到您

tml和body的高度并不一定相同,在内容少的时候,body的高度要小于html,当然这只会出现在body中的内容所占的空间高度小于浏览器的视口高度的时候,此时html的高度大于body的高度。网页中的元素都是以body最为参考,所以有必要保持html和body的高度相同。

  1. html,body{height:100%;}    

第一种方法:
在body中使用两个容器,包括网页的页脚和另外一部分(container)。设置container的高度为100%;页脚部分使用 负外边距 保持其总是在最下方。

  1. html, body {     
  2.     height:100%;     
  3. }     
  4. .fl {     
  5.     float:left;     
  6.     display:inline;     
  7. }     
  8. #container {     
  9.     width:100%;     
  10.     height:300px;     
  11.     overflow:hidden;     
  12.     height:100%;     
  13.     border-bottom:70px #FFFFFF solid;     
  14. }     
  15. .aside {     
  16.     width:30%;     
  17. }     
  18. .article {     
  19.     width:70%;     
  20. }     
  21. #footer {     
  22.     height:50px;     
  23.     width:100%;     
  24.     clear:both;     
  25.     margin-top:-50px;     
  26.     border-bottom:1px solid #e0e0e0;     
  27.     border-top:1px solid #e0e0e0;     
  28. }    


  1. <div id="container">     
  2.     <div id="header">     
  3.         <div>     
  4.             <img src="" width= height= alt="" />     
  5.             <div>     
  6.                 <p>fddfv</p>     
  7.                     <p>容量:<span>24M</span>/<span>2G</span></p>    

您可能想查找下面的文章:

  • css小技巧
  • DIV 自动滚动功能及滚动条颜色修改的代码
  • CSS控制div宽度最大宽度/高度和最小宽度/高度的方法
  • 解决img在div中居中的问题
  • 设置一个DIV块固定在屏幕中央的两种方法(推荐)
  • 使用CSS的overflow属性防止float撑开div的方法
  • CSS文本和div垂直居中方法总结
  • 使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
  • html+css+div实现电影结束效果
  • 不固定宽度和高度的情况下CSS调整div居中的方法总结

相关文章

  • 2017-08-06IE8 滤镜效果filter:alpha(opacity=20);IE下失效出现黑色
  • 2017-08-06CSS中的伪元素简介
  • 2017-08-06div整体居中其内容不居中的示例代码
  • 2017-08-06css实现鼠标滑过改变文字(中文变英文)
  • 2017-08-06网站模板制作中的详情页面的设计方法(图文教程)
  • 2017-08-06从Chrome中提取出来的WebUI样式
  • 2017-08-06在浏览器中解析"赋予margin属性"的checkbox空白边距(IE6和FF)
  • 2017-08-06CSS3 选择器 基本选择器介绍
  • 2017-08-06使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
  • 2017-08-06CSS中的line-height行高属性的使用技巧小结

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS Border属性solid(实线)使用介绍
    • css box-shadow阴影不透明的解决办法
    • css清除浮动的几种方法以及对应规范说明
    • div背景半透明 覆盖整个可视区域的遮罩层效果
    • CSS基础知识之float详解
    • DIY属于个人开发使用的CSS Reset
    • 使用不带单位的line-height
    • IE7与FF下的letter-spacing属性兼容性写法
    • 网站日志200 0 64状态码的分析(协议子状态)
    • CSS设置div对象盒子里部分文字加粗的实例介绍

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有