主要解决问题的方法是用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. 基于SSM的租赁管理系统0.1_20161225_项目需求

    基于SSM的汽车租赁系统项目计划书 1.产品定位 本系统供提供租赁服务的企业内部使用,供企业员工进行线下操作. 2.需求分析 2.1 能为工作人员提供员工信息的管理功能,具有RBAC基于角色的权限管理 ...

  2. js三级地区联动

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head ...

  3. android 对话框 setMultiChoiceItems 设置 初始化勾选

    只需要 设定第二个参数 boolean[] 值就好了

  4. mysql提供dataprovider

    import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.io.Inpu ...

  5. 1Z0-050

    QUESTION 13 View the Exhibit.Examine the following command that is executed for the TRANSPORT table ...

  6. How GitHub Works《Github是如何工作的?》

    https://github.com/blog/920-how-github-works 如果你想知道Github是如何工作的,你可以看查看Zach Holman(@holman)的三篇文章: Hou ...

  7. UWP Jenkins + NuGet + MSBuild 手把手教你做自动UWP Build 和 App store包

    背景 项目上需要做UWP的自动安装包,在以前的公司接触的是TFS来做自动build. 公司要求用Jenkins来做,别笑话我,之前还真不晓得这个东西. 会的同学请看一下指出错误,不会的同学请先自行脑补 ...

  8. Qt中 QString 和int, char等的“相互”转换

    转载:http://blog.csdn.net/ei__nino/article/details/7297791 Qt中 int ,float ,double转换为QString 有两种方法 1.使用 ...

  9. U-BOOT分析之:环境变量

    (环境如下:U-BOOT  S3C2440  LINUX) 记录自己的学习过程,如果分析有问题,请帮忙指正. 最近在研究U-BOOT的代码,其中的环境变量个人觉得用处非常大,所以重点学习和分析一下. ...

  10. Tsinsen A1493 城市规划(DP + CDQ分治 + NTT)

    题目 Source http://www.tsinsen.com/A1493 Description 刚刚解决完电力网络的问题, 阿狸又被领导的任务给难住了. 刚才说过, 阿狸的国家有n个城市, 现在 ...