html页面高度自适应

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

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

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" 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"> 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>