主要解决问题的方法是用JS脚本。

  先看布局, 一个div是首部,另一个div是主体,主体包含左侧菜单和右侧内容。

  我想把主体div的高度自适应屏幕剩余区域,怎么做?

  首先,获取可见区域的高度,document.documentElement.clientHeight

  然后,获取首部的高度,这会是 document.getElementById( "首部Id" ).offsetHeight

  最后,计算 主体的高度 = 获取可见区域的高度 - 获取首部的高度。

  把这句:

document.getElementById( "主体Id" ).style.height = document.documentElement.clientHeight - document.getElementById( "首部Id" ).offsetHeight + "px"; 

写进窗体加载事件onload中即可。

  注意:

      height是指定对象的style对象属性中的一个成员,它的值是一个字符类型的, 所以给它赋值还要加 "px"。

      offsetHeight表示自身高度,在js中属于整型。

      clientHeight表示可见区域的高度,同上。

怎么可以让div自适应屏幕的高度?(已解决)的更多相关文章

  1. Div 自适应屏幕大小

    http://blog.csdn.net/wodetiankong516/article/details/7827256 Background      有时, 我们需要将div或者其他的Elemen ...

  2. 利用 Javascript 让 DIV 自适应屏幕的分辨率,从而决定是否显示滚动条

    直接贴代码了: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  3. css实现自适应屏幕高度;

    css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...

  4. 【笔记】css 实现宽度自适应屏幕 高度自适应宽度

    如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...

  5. 关于自适应屏幕,设置子元素浮动,父div不能包裹子div,子元素中内容溢出的问题。

    设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...

  6. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  7. div自适应高度

    div自适应高度 Div即父容器不根据内容自适应高度,我们看下面的代码: <div id="main"> <div id="content"& ...

  8. js自适应屏幕高度

    //自适应屏幕高度 $(window).resize(function() { hightChange(); }); function hightChange(){ ; $();// iframe i ...

  9. 外部div自适应内部标签的高度,设置最小高度、最大高度

    一.div自适应高度:在前端开发中经常需要让外层的div自动适应内部标签和内容的高度,内部标签可能是<div>.<ul>.<ol>或者文字等各种内容.造成外层的di ...

随机推荐

  1. mssqlserver 数据库一直提示“正在还原”

    今天访问服务器,突然发现不知道数据库被谁给还原了,而且一直处于还原状态无法结束. 通过查询说是恢复进程被挂起了,最终通过命令: RESTORE database   dbname with recov ...

  2. css清除浮动大全共8种方法

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...

  3. C#Linq技术中SelectMany(...)的内部实现推测

    对于声明为:public static IEnumerable<TResult> SelectMany<TSource, TResult>(this IEnumerable&l ...

  4. 【转】Java面试宝典2015版(绝对值得收藏超长版)(一)

    (转自:http://mp.weixin.qq.com/s?__biz=MjM5MTM0NjQ2MQ==&mid=206619070&idx=1&sn=fcb21001d442 ...

  5. 配置ntp服务

    配置ntp服务(hadoop搭建可参考) 一:修改选定的服务器的本地时间 date -s '2016-10-07 16:29:30' +'%F %T' //需要设置的时间 二:修改后将时间写入到硬件时 ...

  6. Linux中文件颜色所代表的属性和颜色

    绿色文件: 可执行文件,可执行的程序    红色文件:压缩文件或者包文件   蓝色文件:目录   白色文件:一般性文件,如文本文件,配置文件,源码文件等    浅蓝色文件:链接文件,主要是使用ln命令 ...

  7. git与github使用

    Git和Github简单教程 目录: 零.Git是什么 一.Git的主要功能:版本控制 二.概览 三.Git for Windows软件安装 四.本地Git的使用 五.Github与Git的关联 六. ...

  8. ubuntu_tftp服务搭建

    搭建过程: 1. sudo apt-get install tftpd-hpa tftp-hpa是客户端 tftpd-hpa是服务器端 2.建立目录 执行:mkdir /home/wmx/Deskto ...

  9. CozyRSS开发记录21-默认RSS源列表

    CozyRSS开发记录21-默认RSS源列表 1.默认列表 在第一次使用CozyRSS的情况下,我们让它内置五个RSS源吧: 2.响应RSS源的更新 先不处理RSS源列表项的点击,响应下下拉菜单里的更 ...

  10. mac版Camtasia 2.10破解

    Camtasia是非常好用的一款录屏.视频编辑.制作的软件.但是这么一款优秀的软件只有30天的试用期,试用期过后便不能使用. 目前网上的破解办法几乎都属于同一种办法: http://www.orsoo ...