<!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不会跟着你浏览器视窗变化而变化 这该怎么解决
<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不会跟着你浏览器视窗变化而变化 这该怎么解决
解决方案 »
- 用json做二级联动为什么会内存溢出。求解!
- js正则表达式
- ext高手请帮忙 我想做一个根据combobox的值生成下一个组件 比如选择按姓名查询 则生成文本框 选择按性别查询则生成选项为男和女的下拉框 求帮忙
- 关于table点击取出单元格值
- 如何使用javascript查询IE支持的mime类型
- 在js中将字符串yyyy--MM--dd hh:mm:ss转成相同格式的日期时,怎么08/09会变成0????
- c#网站如何设置定时器
- 100分求网页中获取当前机器上登陆的QQ号的问题
- javascript菜鸟问题
- echo "var guigexinghao=trim('a$tiaozhang_ggxh');"问题$tiaozhang_ggxh中有"and '字符
- 带变量的 正则表达式问题
- JS 如何判断 DOM 操作已经完成?
<!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事件监听。
<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了