主要解决问题的方法是用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. IIS6.0 web.config

    IIS6.0环境下,要把托管管道模式 改为:经典. <?xml version="1.0" encoding="UTF-8"?> <confi ...

  2. sublime text3 前端插件介绍

    Emmet插件 Emmet插件可以说是使用Sublime Text进行前端开发必不可少的插件 它让编写HTML代码变得极其简单高效 基本用法:输入标签简写形式,然后按Tab键 关于Emmet的更多介绍 ...

  3. 关于sql的执行顺序

    标准sql的解析顺序为 1)FROM子句,组装来自不同数据源的数据 2)WHERE子句 基于制定的条件对记录进行筛选 3)GROUP BY 子句将数据划分为多个分组 4)使用聚合函数进行计算 5) 使 ...

  4. 复制远程共享文件夹内容到本地(python脚本实例)

    本人自用脚本(python): #-*- coding:utf-8 -*- import sys , os , re def copyFileDir(srcFilename , desFilename ...

  5. CNN初步-2

    Pooling 为了解决convolved之后输出维度太大的问题 在convolved的特征基础上采用的不是相交的区域处理     http://www.wildml.com/2015/11/unde ...

  6. ExtJS基础知识总结:自定义日历和ComboBox控件(二)

    概述 1.ExtJS 5不支持日期选择框中只选择年月,为了满足ExtJs5可以实现选择年月的功能,查询网上资料,整理出来了相应的处理方式,最终实现的效果如下图: 2.ExtJS 控件丰富,如果需要实现 ...

  7. C语言的可变参数在Linux(Ubuntu)与Windows下注意点

    基本上C语言的可变参数原理在不同平台和不同编译器下基本类似(通过函数入栈,从右向左,从高位到低位地址),不过部分实现会有所不同:在使用中需要注意的是: va_list 为char 类型指针,部分调用如 ...

  8. Linux deepin 下sublimes配置g++ openGL

    参考 :http://blog.csdn.net/u010129448/article/details/47754623 ubuntu 下gnome只要将代码中deepin-terminal改为gno ...

  9. 单调队列 && 斜率优化dp 专题

    首先得讲一下单调队列,顾名思义,单调队列就是队列中的每个元素具有单调性,如果是单调递增队列,那么每个元素都是单调递增的,反正,亦然. 那么如何对单调队列进行操作呢? 是这样的:对于单调队列而言,队首和 ...

  10. MMU工作原理

    MMU的工作原理就是把虚拟地址转换成物理地址. 虚拟地址:由编译器和连接器在定位程序时分配. 物理地址:用来访问实际的主存硬件模块. 使用虚拟存储器的系统都使用一种称为分页(paging).虚拟地址空 ...