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

<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页面高度自适应的更多相关文章

  1. swiper 不同页面高度自适应

    在使用swiper写页面滑动时发现不同页面高度无法自适应,使用autoHeight:true也不起作用 研究了一下发现可以这样设置 .swiper-slide{ overflow: hidden; } ...

  2. 页面高度自适应方法（PC、移动端都适用）

    有个项目移动端的首页需要自适应. 宽度已经自适应了 , 高度也要自适应 ,先总结一下方法,PC端也适用. $(function(){ var h = window.innerHeight; $(&qu ...

  3. iframe父页面和子页面高度自适应

    父页HTML: <iframe  id="mainframe" name="mainframe"  style="width:100%;&quo ...

  4. vue iframe嵌套页面高度自适应 (ios 宽度扩大的bug , ios展示比例问题)

    <template>   <div class="card-index pt-relative">     <div id="wrapper ...

  5. iframe高度自适应

    前两天在网上看到了一道面试题,问iframe高度自适应的问题.发现自己之前几乎没有关注过iframe的问题,所以在这里记录一下. 原题目是: 页面A的域名是:http://www.taobao.com ...

  6. jQuery简单实现iframe的高度根据页面内容自适应的方法(转)

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...

  7. 总结iframe高度自适应，自适应子页面高度

      在网上找了很多iframe的高度自适应,发现很多兼容性都不是很好,于是自己总结了一下. 页面html节点上要有 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  8. div模拟textarea以实现高度自适应实例页面

    作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...

  9. 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度（JavaScript）

    在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...

随机推荐

  1. 第一数学归纳法 vs 第二数学归纳法 vs 良序定理

    相关: 第一数学归纳法 vs 第二数学归纳法 vs 良序定 第二数学归纳法:硬币问题和堆垛游戏 第一数学归纳法:施塔特中心的地板砖 良序原理:算术基本定理的证明 From : Mathematics ...

  2. RobotFramework自动化测试环境配置

    现在工作是做自动化测试平台维护的,平台用的C#做的,主要是用来测试CMBRun项目,它是c/s结构的项目,而b/s结构的项目主要使用RF+Python来做.做这块之前听过自动化测试,身边的朋友也有做这 ...

  3. Python连接Oracle数据库

    今天使用Python连接数据库,连接没有问题,就是中文显示乱码,网上找了很多解决方案, 最后选择使用这个 #!/usr/bin/env python # -*- coding:utf-8 -*- #A ...

  4. [转载] 理解OAuth 2.0

    转载自http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html OAuth是一个关于授权(authorization)的开放网络标准,在全世界得到广泛 ...

  5. node.js安装——Windows7系统下的安装及其环境部署——特别详细

    作为一个前端的菜鸟同学,之间也没学过什么框架,目前公司做项目,所用到的webpack+node.js+vue. 首先,关于node的环境部署方面,建议官网安装node.js,最好不要安装非稳定版的版本 ...

  6. POJ1082食物链

    加权并查集入门习题. 传送门http://poj.org/problem?id=1182 下面来记录一下做法: 并查集的作用是询问两个对象时候在同一集合以及将两个非空不相交集合合并. 本题涉及两点之间 ...

  7. asp.net web api 构建api帮助文档

    1 概要 创建ASP.NET Web Api 时模板自带Help Pages框架. 2 问题 1)使用VS创建Web Api项目时,模板将Help Pages框架自动集成到其中,使得Web Api项目 ...

  8. 爬虫day 04(通过登录去爬虫 解决django的csrf_token)

    #通过登录去爬虫 #首先要有用户名和密码 import urllib.request import http.cookiejar from lxml import etree head = { 'Co ...

  9. ios多线程开发总结

    1>无论使用哪种方法进行多线程开发,每个线程启动后并不一定立即执行相应的操作,具体什么时候由系统调度(CPU空闲时就会执行). 2>更新UI应该在主线程(UI线程)中进行,并且推荐使用同步 ...

  10. Python测试开发之---list、str、dict、tuple小结

    str的常用方法有: str.digits 0-9的表示str.uppercase 大写字母str.lowercase 小写字母str.letters 所有字母" ".join(s ...