如何让div一直在页面底部~~
4个回答
展开全部
<!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>
我自己做的，仅供参考~
<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>
我自己做的，仅供参考~
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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。这样我们就实现了层垂直居中于浏览器的样式编写
<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。这样我们就实现了层垂直居中于浏览器的样式编写
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div style="position:absolute; bottom:0; position:fixed;"></div>但这种方法IE6好像不支持，如果要所以兼容所有浏览器，最好用js写
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div style="position:absolute; bottom:0; left:0">sssssssss</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
