87,990
社区成员
发帖
与我相关
我的任务
分享求助各位大神，怎么让DIV窗口不管怎么变都居下
<!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>
</head
<body>
<div id="fixed" style="width: 100%; height:66px; width:100%; background:#F00; border:solid 1px #000;"></div>
<div style="height:2000px;" title="请拖动滚动条"></div>
<script type="text/javascript">
var ph=(document.body.offsetHeight -70)+"px";
var pw=(document.documentElement.offsetWidth -70)+"px";
var position = function(){
var isIE6 = !-[1,] && !window.XMLHttpRequest,
html = document.getElementsByTagName('html')[0],
dd = document.documentElement,
db = document.body,
dom = dd || db,
// 获取滚动条位置
getScroll = function(win){
return {
left: Math.max(dd.scrollLeft, db.scrollLeft),
top: Math.max(dd.scrollTop, db.scrollTop)
};
};
if (isIE6 && document.body.currentStyle.backgroundAttachment !== 'fixed') {
html.style.backgroundImage = 'url(about:blank)';
html.style.backgroundAttachment = 'fixed';
};
return {
fixed: isIE6 ? function(elem){
var style = elem.style,
doc = getScroll(),
dom = '(document.documentElement || document.body)',
left = parseInt(style.left) - doc.left,
top = parseInt(style.top) - doc.top;
this.absolute(elem);
style.setExpression('left', 'eval(' + dom + '.scrollLeft + ' + left + ') + "px"');
style.setExpression('top', 'eval(' + dom + '.scrollTop + ' + top + ') + "px"');
} : function(elem){
elem.style.position = 'fixed';
},
absolute: isIE6 ? function(elem){
var style = elem.style;
style.position = 'absolute';
style.removeExpression('left');
style.removeExpression('top');
} : function(elem){
elem.style.position = 'absolute';
}
};
}();
//获取浏览器高度
var elem = document.getElementById('fixed');
var btop = document.documentElement.clientHeight - 66;
elem.style.left = '0px';
elem.style.top = btop+'px';
position.fixed(elem);
</script>
</body>
</html>
现在我已经做到 兼容各个浏览器 都是在底部显示DIV 但是如果改变浏览器的窗口大小 就不动了 这样 该怎么解决
比如说你浏览器视窗 本来没有全屏 是缩小化看的 然后全屏了 但是底部DIV不会跟着你浏览器视窗变化而变化 这该怎么解决
...全文
请发表友善的回复…
发表回复
挨踢直男 2011-07-25
- 打赏
- 举报
<!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>
</head>
<body>
<div id="fixed" style="width: 100%; height:66px; width:100%; background:#F00; border:solid 1px #000;"></div>
<div style="height:2000px;" title="请拖动滚动条"></div>
<script type="text/javascript">
var ph=(document.body.offsetHeight -70)+"px";
var pw=(document.documentElement.offsetWidth -70)+"px";
var position = function(){
var isIE6 = !-[1,] && !window.XMLHttpRequest,
html = document.getElementsByTagName('html')[0],
dd = document.documentElement,
db = document.body,
dom = dd || db,
// 获取滚动条位置
getScroll = function(win){
return {
left: Math.max(dd.scrollLeft, db.scrollLeft),
top: Math.max(dd.scrollTop, db.scrollTop)
};
};
if (isIE6 && document.body.currentStyle.backgroundAttachment !== 'fixed') {
html.style.backgroundImage = 'url(about:blank)';
html.style.backgroundAttachment = 'fixed';
};
return {
fixed: isIE6 ? function(elem){
var style = elem.style,
doc = getScroll(),
dom = '(document.documentElement || document.body)',
left = parseInt(style.left) - doc.left,
top = parseInt(style.top) - doc.top;
this.absolute(elem);
style.setExpression('left', 'eval(' + dom + '.scrollLeft + ' + left + ') + "px"');
style.setExpression('top', 'eval(' + dom + '.scrollTop + ' + top + ') + "px"');
} : function(elem){
elem.style.position = 'fixed';
},
absolute: isIE6 ? function(elem){
var style = elem.style;
style.position = 'absolute';
style.removeExpression('left');
style.removeExpression('top');
} : function(elem){
elem.style.position = 'absolute';
}
};
}();
//获取浏览器高度
function func()
{
var elem = document.getElementById('fixed');
var btop = document.documentElement.clientHeight - 66;
elem.style.left = '0px';
elem.style.top = btop+'px';
position.fixed(elem);
}
func()
window.onresize=func;
</script>
</body>
</html>
你那个 <head>标签写成 "<head" 了 ，少了 个 ">"，下面的代码能兼容ie了
小烟 2011-07-25
- 打赏
- 举报
大哥 IE6下不行啊 就是IE6有问题
Oozie 2011-07-25
- 打赏
- 举报
<!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>
</head
<body>
<div id="fixed" style="width: 100%; height:66px; width:100%; background:#F00; border:solid 1px #000;"></div>
<div style="height:2000px;" title="请拖动滚动条"></div>
<script type="text/javascript">
var ph=(document.body.offsetHeight -70)+"px";
var pw=(document.documentElement.offsetWidth -70)+"px";
var position = function(){
var isIE6 = !-[1,] && !window.XMLHttpRequest,
html = document.getElementsByTagName('html')[0],
dd = document.documentElement,
db = document.body,
dom = dd || db,
// 获取滚动条位置
getScroll = function(win){
return {
left: Math.max(dd.scrollLeft, db.scrollLeft),
top: Math.max(dd.scrollTop, db.scrollTop)
};
};
if (isIE6 && document.body.currentStyle.backgroundAttachment !== 'fixed') {
html.style.backgroundImage = 'url(about:blank)';
html.style.backgroundAttachment = 'fixed';
};
return {
fixed: isIE6 ? function(elem){
var style = elem.style,
doc = getScroll(),
dom = '(document.documentElement || document.body)',
left = parseInt(style.left) - doc.left,
top = parseInt(style.top) - doc.top;
this.absolute(elem);
style.setExpression('left', 'eval(' + dom + '.scrollLeft + ' + left + ') + "px"');
style.setExpression('top', 'eval(' + dom + '.scrollTop + ' + top + ') + "px"');
} : function(elem){
elem.style.position = 'fixed';
},
absolute: isIE6 ? function(elem){
var style = elem.style;
style.position = 'absolute';
style.removeExpression('left');
style.removeExpression('top');
} : function(elem){
elem.style.position = 'absolute';
}
};
}();
//获取浏览器高度
var elem = document.getElementById('fixed');
var btop = document.documentElement.clientHeight - 66;
elem.style.left = '0px';
elem.style.top = btop+'px';
position.fixed(elem);
this.onresize = function(){
btop = document.documentElement.clientHeight - 66;
elem.style.left = '0px';
elem.style.top = btop+'px';
position.fixed(elem);
}
</script>
</body>
</html>
加个onresize事件监听。
