首页 > 开发 > CSS > 正文

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

2024-07-11 08:33:12

字体：大中小

来源：转载

供稿：网友

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

CSS Code复制内容到剪贴板

html,body{height:100%;}

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

CSS Code复制内容到剪贴板

html, body { height:100%;
} .fl {
float:left; display:inline;
} #container {
width:100%; height:300px;
overflow:hidden; height:100%;
border-bottom:70px #FFFFFF solid; }
.aside { width:30%;
} .article {
width:70%; }
#footer { height:50px;
width:100%; clear:both;
margin-top:-50px; border-bottom:1px solid #e0e0e0;
border-top:1px solid #e0e0e0; }

XML/HTML Code复制内容到剪贴板

<div id="container"> <div id="header">
<div> <img src="" width= height= alt="" />

上一篇：纯html+css制作三级下拉菜单

下一篇：css制作黑色经典导航下拉菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注