html页面高度自适应

最新推荐文章于 2024-05-03 02:10:24 发布

小蜗牛1

最新推荐文章于 2024-05-03 02:10:24 发布

阅读量3.9k

点赞数 1

分类专栏： java web

本文链接：https://blog.csdn.net/adgjlxxx/article/details/46725695

版权

java web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文实现的效果是根据浏览器分辨率的不同，页面底端背景色自适应浏览器高度，也就是可以自动填充背景色。

function height_adaptive(){
  var main=$(document).height();
  var title=document.getElementById("login_title").scrollHeight;
  var body=document.getElementById("login_body").scrollHeight;
  var bottom=main-title-body;
  $("#login_bottom").height(bottom);
}
</script>

<form method="post" action="login.action" name="frm" id="frm">
<div id="login_title" class="login_title">
<span id="lbl_title">mindray | OR Digital System</span>
</div>
<div id="login_body" align="center" class="login_body">
<div align="left" class="login_head">
  <img id="logo" alt="" src="./images/web/login_logo.png">
</div>
<table cellspacing="10px" style="padding-top:278px">
  <tr>
   <td><input type="text" id="userNameTest" name="tuser.username" οnblur="showpasssword()" style="background:#FFFFFF url(images/web/user_available.png) no-repeat;" /></td>
  </tr>
  <tr>
   <td><input type="password" id="usrpwdTest" name="tuser.password" style="background:#FFFFFF url(images/web/pwd_available.png) no-repeat;" /></td>
  </tr>
  <tr>
   <td align="left"><img id="remember" alt="" src="images/web/ck_unselect.png" οnmοuseοver="rem_mouseover()" οnmοuseοut="rem_mouseout()"
     οnmοusedοwn="rem_mousedown()" οnmοuseup="rem_mouseup()">
   <span id="lbl_remember"> Remember me</span></td>
  </tr>
</table>
</div>
<div id="login_bottom" align="center" class="login_bottom">
<br />
<button type="button" id="btn_login" οnclick="check()" οnmοusedοwn="login_mousedown()" οnmοuseup="login_mouseup()">Log in</button>
</div>

</FORM>
</BODY>

小蜗牛1

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html页面高度自适应

本文实现的效果是根据浏览器分辨率的不同，页面底端背景色自适应浏览器高度，也就是可以自动填充背景色。function height_adaptive(){ var main=$(document).height(); var title=document.getElementById("login_title").scrollHeight; var body=documen
复制链接

扫一扫