分享好友 前端技术首页 频道列表

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

css教程  2016-04-27 16:550

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

CSS Code复制内容到剪贴板
  1. html,body{height:100%;}    

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

CSS Code复制内容到剪贴板
  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. }    


XML/HTML Code复制内容到剪贴板
  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>     
  8.             </div>     
  9.         </div>     
  10.     </div>     
  11.     <div class="aside fl"> dsfcndsjkcnsd</div>     
  12.     <div class="article fl">cdsklcmdskcmkdslcmksdlckldsmcskl</div>     
  13. </div>     
  14. <div id="footer">footer</div>   

 

第二种方法：使用绝对定位
这里我们使用到了position属性，让我们先来回顾一下position的基础用法：

　　position有四个参数：static  | relative | absolute | fixed

　　position:static，意味元素没有被定位，元素会出现在文档本该出现位置，是页面元素默认的定位的方式，一般无需指定，除非想要覆盖之前设置的定位。

　　position:relative,很明白，相对元素本该位置的偏移量　　

CSS Code复制内容到剪贴板
  1. #nav{   
  2.     position:relative;   
  3.     top:15px;   
  4.     left:20px;        
  5. }      

　　position:absolute,这时候元素已经脱离了文档，文档中已经没有自己的本该的位置了，但我们可以通过left、bottom、left和right来规定其在文档中位置。

CSS Code复制内容到剪贴板
  1. #nav{   
  2.     postion:absolute;   
  3.     botton:0px;   
  4. }  

　　我们知道万物都是相对的，元素进行上面设置了后就保证nav元素始终保持在底部了呢？nav元素离botton为0px,是哪个为参照物呢，是父级元素还还是浏览器呢，其实这里分为两种情况：

　　如果父级元素（父级元素的父级、父级的父级的父级......）设置postion时，则子元素此时相对的是父级的，所以当内容过多时，脚DIV不能被挤到底部去。

　　如果父级元素（父级元素的父级、父级的父级的父级......）没有设置postion时，则子元素此时相对的是浏览器的，所以当内容过少时，脚DIV不能被挤到底部去。

好了，下面回到正题，同样需要保持html和body的高度相同，并且body需要添加另外的一些样式，footer需要使用绝对定位。

CSS Code复制内容到剪贴板
  1. body{position:relative;height:auto !important;height:100%;min-height:100%;}     
  2.   
  3. html {     
  4.     height:100%;     
  5. }     
  6. body {     
  7.     margin:0;     
  8.     padding:0;     
  9.     position:relative;     
  10.     height:auto !important;     
  11.     height:100%;     
  12.     min-height:100%;     
  13.     text-align:center;     
  14. }     
  15. .fl {     
  16.     float:left;     
  17.     display:inline;     
  18. }     
  19. #header {     
  20.     width:100%;     
  21.     height:80px;     
  22. }     
  23. #container {     
  24.     width:100%;     
  25.     height:300px;     
  26.     overflow:hidden;     
  27.     border-bottom:#FFFFFF 60px solid;     
  28. }     
  29. .aside {     
  30.     width:30%;     
  31. }     
  32. .article {     
  33.     width:70%;     
  34. }     
  35. #footer {     
  36.     height:50px;     
  37.     position:absolute;     
  38.     width:100%;     
  39.     clear:both;     
  40.     bottombottom:0;     
  41.     left:0;     
  42.     border-bottom:1px solid #e0e0e0;     
  43.     border-top:1px solid #e0e0e0;     
  44. }    


XML/HTML Code复制内容到剪贴板
  1. <div id="header">     
  2.     <div>     
  3.         <img src="" width= height= alt="" />     
  4.         <div>     
  5.             <p>fddfv</p>     
  6.             <p>容量：<span>24M</span>/<span>2G</span></p>     
  7.         </div>     
  8.     </div>     
  9. </div>     
  10. <div id="container" style="border-bottom:#FFFFFF 60px solid;">     
  11.     <div class="aside fl"> dsfcndsjkcnsd</div>     
  12.     <div class="article fl">cdsklcmdskcmkdslcmksdlckldsmcskl</div>     
  13. </div>     
  14. <div id="footer">footer</div>    

简单总结

第一种方式，不论内容占据的空间相对浏览器视口多高，浏览器侧面的滚动条总是会出现。第二种则使用了 ！importent，但是侧面的滚动条旨在需要的时候出现。两种方法的共同点是都有一个比footer高度相等或稍大的下边距。

查看更多关于【css教程】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
javascript怎么清空一个div里面的内容 jquery 清空div里面的内容
document.getElementById('BIGDraw').innerHTML = "";$('#BIGDraw').html("");清空div内容  两种都可以 版权声明：本文为博主原创文章，未经博主允许不得转载。

0评论2023-03-08616

JavaScript监听滚动条停止滚动 js监听div滚动事件
需求：当滚动条滚动时将x元素隐藏掉，当滚动条停止滚动时再将元素x显示出来。let scrollTop = 0;let scrollEndTop = 0;let timer = null;document.onscroll = function() {clearTimeout(timer);timer = setTimeout(isScrollEnd, 500);scrollTop = document.do

0评论2023-03-08518

JavaScript动态加载资源 js动态加载div
//动态加载样式function dynamicLoadingCss(path){if(!path || path.length === 0){return false;}var head = document.getElementsByTagName('head')[0];var link = document.createElement('link');link.href = path;link.rel = 'stylesheet';link

0评论2023-03-08628

转 Div+Css控制背景图片水平垂直居中显示 背景铺满全屏
在Web开发中我们经常要碰到这样的问题：在为一个页面设置背景图片之后往往希望图片能够在分辨率比较大的情况下水平垂直都居中显示。通常水平居中显示在Css中是很容易做到的，而垂直居中就需要使用一些Css的技巧：1. 首先为了能使得网站能够根据浏览器大小自适

0评论2023-03-08628

CSS画行内分隔线 css在div里加一条分割线
为行内元素画长宽可变化的居中分隔线1、采用display:inline-block样式这个属性通俗一点的解释就是让块级元素可以在一行显示。既是块级元素又可以在同一行显示就可以设置display:inline-block.1 pdiv/divlalalalalaladiv/div/pcss部分：1 div {2 display: inli

0评论2023-03-08734

CSS设置DIV居中 css中让div居中
style type="text/css"body{ text-align:center;}.divs{margin:0 auto;}/stylebody div class="divs"CSS设置DIV居中/div/body

0评论2023-03-08712

CSS+DIV网页样式与布局：第二章：CSS的基本语法
第二章：CSS的基本语法一 CSS选择器（所有的HTML语言中的标记都是通过不同的css选择器进行控制的）。用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。1、标记选择器（列如  p ul    p{color:green;}）2、类别选择器

0评论2023-03-08379

(转)Flex嵌入到HTML中切换焦点不能输入中文和遮盖DIV的问题
http://blog.csdn.net/vipliyaohua/article/details/6586457Flex嵌入到HTML中切换焦点不能输入中文和遮盖DIV的问题 默认情况下如果Flash被嵌入到Web页面中，则SWF文件默认被置于所有HTML元素的顶层渲染级别的。类似在所有html元素的总父容器上一层，无法被任

0评论2023-03-08678

HTML往div中赋值 html给id赋值
HTML中往div赋值div content/div  使用JavaScript:var mazey=document.getElementById("mazey");mazey.innerHTML=data; 使用jQuery:$("#mazey").html(data);　　　　　　

0评论2023-03-08513

html中定位详解 html定位div
首先，我们来讨论一下html中共有几种定位方式：静态定位（static），相对定位(relative),绝对定位(absolute,fixed).其中fixed又叫固定定位，它是属于绝对定位的一种，但是又有所不同。下面我就来具体讲解一下。 首先,static定位就是我们html中默认的定位方式

0评论2023-03-08439

React练习 7 ：点击div，显示innerHTML
需求：点击div，显示innerHTMLimport React,{useState,useEffect} from 'react';import ReactDOM from 'react-dom';import './index.css';function Showinnerhtml(){return(div div onClick={(e)=alert(e.target.innerHTML)}strong新华网/strong北京5月29日电

0评论2023-03-08991

DIV+CSS效果(实现平滑投票效果等） css如何让div滑动显现
这种技巧的名称叫做CSS Sprite，基本原理就是利用CSS中图片background系列的 background-image、background-repeat、background-position等属性实现。通过这种方式达到图片显示 加速的关键，不是降低重量，而是减少个数。在通常情况下一张图片的传输时间，通

0评论2023-03-08999

chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持，技巧：要在鼠标上的 div上 勾 :hover
chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持，技巧：要在鼠标上的 div上 勾 :hover

0评论2023-03-08957

css中div输入框对齐 css div居中对齐
htmlbodyspan style="font-size: 12px; margin-left: 26px; margin-top: 3px; float: left; width: 3em;"起点:/spandivinput type="text"/divspan style="font-size: 12px; margin-left: 26px; margin-top: 3px; float: left; width: 3em;"终点:/s

0评论2023-03-08681

更多推荐