码迷,mamicode.com
首页 > Web开发 > 详细

html页面高度自适应

时间:2015-07-02 15:54:00      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:

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

<script type="text/javascript">

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>

 

<BODY id="userlogin_body" onload="height_adaptive()">

<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" onblur="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" onmouseover="rem_mouseover()" onmouseout="rem_mouseout()"
     onmousedown="rem_mousedown()" onmouseup="rem_mouseup()">
   <span id="lbl_remember">&nbsp;Remember me</span></td>
  </tr>
 </table>
  </div>
  <div id="login_bottom" align="center" class="login_bottom">
 <br />
 <button type="button" id="btn_login" onclick="check()" onmousedown="login_mousedown()" onmouseup="login_mouseup()">Log in</button>
  </div>

</FORM>
</BODY>

 

 

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

html页面高度自适应

标签:

原文地址:http://blog.csdn.net/adgjlxxx/article/details/46725695

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!