DIV层怎么浮动显示窗口的最底部
日期：2014-05-17 浏览次数：20781 次
DIV层如何浮动显示窗口的最底部
就是一个DIV层如何浮动显示窗口的最底部？层需要透明显示。
这个要怎么写CSS，或者JS代码，或者有实例的网址给个也行。
------解决方案--------------------
就是一个DIV层如何浮动显示窗口的最底部？层需要透明显示。
这个要怎么写CSS，或者JS代码，或者有实例的网址给个也行。
------解决方案--------------------
- HTML code
<!doctype html>
<html>
<head>
<meta charset="gb2312" />
<style>
body { height:1850px; }
div {
width:100px; height:100px; border:1px solid red;
position:absolute; bottom:10px; right:10px;
}
</style>
</head>
<body>
<div id="test">123</div>
<script>
function $(o){return document.getElementById(o)}
window.onscroll = function(){
$('test').style.top = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop) - 110 +'px'
}
</script>
</body>
</html>
------解决方案--------------------
- HTML code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
</head>
<body style="height:2000px;">
<div id="btn" style="width:100px; height:50px;position:absolute; bottom:10px;light:10px;
"><input type="button" name="hidebtn" value="隐藏菜单" onclick="dis(this)"></div>
<script>
function $(o){return document.getElementById(o)}
window.onscroll = function(){
$('btn').style.top = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop) - 60 +'px'
}
</script>
<script>
function dis(b){
document.getElementById('menus').style.display = (document.getElementById('menus').style.display=="none") ? "block" : "none";
b.value = (b.value=="显示菜单") ? "隐藏菜单" : "显示菜单";
}
</script>
<div id="menus">
<table width="480" border="0" align="center">
<tr><td onclick="this.style.backgroundColor='#87CEEB';location.href='AddUser.html'" style="text-align:center;width:120px;height:120px;background-color:#DCDCDC;"><div><img src="../images/a1.png" /></div><div style="padding:5px 5px 5px 5px;color:#483D8B;">增加</div></td>
<td onclick="this.style.backgroundColor='#87CEEB';location.href='DelUser.html'" style="text-align:center;width:120px;height:120px;background-color:#DCDCDC;"><div><img src="../images/a2.png" /></div><div style="padding:5px 5px 5px 5px;color:#483D8B;">删除</div></td>
<td onclick="this.style.backgroundColor='#87CEEB';location.href='ShortQuery.html'" style="text-align:center;width:120px;height:120px;background-color:#DCDCDC;"><div><img src="../images/a3.png" /></div><div style="padding:5px 5px 5px 5px;color:#483D8B;">查询</div></td>
<td onclick="this.style.backgroundColor='#87CEEB';location.href='ShortPrint.html'" style="text-align:center;width:120px;height:120px;background-color:#DCDCDC;"><div><img src="../images/a6.png" /></div><div style="padding:5px 5px 5px 5px;color:#483D8B;">打印</div></td>
</tr>
</table>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
