如何让div一直在页面底部~~

 我来答
希望昭示未来
推荐于2017-11-24 · TA获得超过183个赞
知道答主
回答量:128
采纳率:0%
帮助的人:144万
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0px; padding:0px;}
body{font-size:12px; line-height:1.5em; color:#333; font-family:Arial, Helvetica, sans-serif;}
.content{height:3500px;}
.bottomDiv{position:fixed; height:24px; line-height:24px; text-align:center; background-color:#efefef; border-top:1px solid #CCC; left:0px; bottom:0px; _position:absolute;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><!--jquery引用地址-->
<script>
$(document).ready(function(){
var screenWidth = $(window).width();//获取屏幕可视区域的宽度。
$(".bottomDiv").width(screenWidth);//将宽度赋值给bottomDiv使其可以贯穿整个屏幕。
var screenHeight = $(window).height();//获取屏幕可视区域的高度。
var divHeight = $(".bottomDiv").height() + 1;//bottomDiv的高度再加上它一像素的边框。

$(window).scroll(function(){
var scrollHeight = $(document).scrollTop();//获取滚动条滚动的高度。
if(!window.XMLHttpRequest){
$(".bottomDiv").css("top",screenHeight + scrollHeight - divHeight);
}//判断是否为IE6,如果是,执行大括号中内容
})
})
</script>
</head>

<body>
<div class="content"></div>
<div class="bottomDiv">我始终在最底下</div>
</body>
</html>

我自己做的,仅供参考~
lp5276159be1
2011-07-22 · TA获得超过2万个赞
知道大有可为答主
回答量:1万
采纳率:39%
帮助的人:4305万
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
div {
position:absolute;
top:100%;
left:50%;
margin:-50px 0 0 -200px;
width:400px;
height:50px;
background-color:red;
text-align:center;
line-height:50px;
}
-->
</style>
</head>

<body>

<div>让层左右居中并置底于浏览器窗口</div>
</body>
</html>

样式简单并且兼容各版本浏览器,不需要插入复杂的js脚本,也不会出现其他置底的层容易出现的问题,很多层置底后会使页面出现滚动条
此方法也适用于让层垂直居中与浏览器
层垂直居中于浏览器,一直是朋友比较头疼的问题。
其实解决的思路是这样的:首们需要position:absolute;绝对定位。而层的定位点,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。

如:一个层宽度是400,高度是50。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为-25。margin-left的值为-200。这样我们就实现了层垂直居中于浏览器的样式编写
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
嗨皮你我他
2011-07-22 · TA获得超过681个赞
知道小有建树答主
回答量:250
采纳率:0%
帮助的人:102万
展开全部
<div style="position:absolute; bottom:0; position:fixed;"></div>但这种方法IE6好像不支持,如果要所以兼容所有浏览器,最好用js写
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2011-07-22
展开全部
<div style="position:absolute; bottom:0; left:0">sssssssss</div>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式