主要解决问题的方法是用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. 升级python

    一开始有这个需求,是因为用 YaH3C 替代 iNode 进行校园网认证时,一直编译错误,提示找不到 Python 的某个模块,百度了一下,此模块是在 Python2.7 以上才有的,但是系统的自带的 ...

  2. Yii 1开发日记 -- 后台搜索功能下拉及关联表搜索

    Yii 1 实现后台搜索,效果如下: 一. 下拉搜索: 1.模型中和常规的一样 if (isset($_GET['agency']['status']) && $_GET['agenc ...

  3. 【leetcode】Generate Parentheses

    题目简述: Given n pairs of parentheses, write a function to generate all combinations of well-formed par ...

  4. 模板类 error LNK2019: 无法解析的外部符号

    如果将类模板的声明和实现写在两个独立的文件中,在构建时会出现"error LNK2019: 无法解析的外部符号 "的错误. 解决方法有: 第一种方法,就是把类模板中成员函数的声明和 ...

  5. Oracle存储过程语法

    原文链接:http://www.jb51.net/article/31805.htm Oracle存储过程基本语法 存储过程  1 CREATE OR REPLACE PROCEDURE 存储过程名  ...

  6. Java 之 数据库编程(JDBC)

    1.JDBC a.定义:是一种用于执行SQL语句的Java API,它由一组用Java 语言编写的类和接口组成 b.操作步骤: ①加载驱动--告诉驱动管理器我们将使用哪一个数据库的驱动包 Class. ...

  7. Kafka、RabbitMQ、RocketMQ消息中间件的对比 —— 消息发送性能-转自阿里中间件

    引言 分布式系统中,我们广泛运用消息中间件进行系统间的数据交换,便于异步解耦.现在开源的消息中间件有很多,前段时间我们自家的产品 RocketMQ (MetaQ的内核) 也顺利开源,得到大家的关注. ...

  8. gitbook安装与使用之windows下搭建gitbook平台

    最近需要在GitBook中去阅读电子书 安装nodejs cnpm安装gitbook 解压书籍文件,并cd到书籍文件目录 gitbook serve 浏览器访问localhost:4000 先在win ...

  9. POI的入门

    POI快速入门 POI开发需要的七个步骤: 1.创建工作薄WorkBook对象 Workbook wb = new HSSFWorkbook(); //它是操作excel 2003版本 2.创建一个工 ...

  10. 小tips

    ios::sync_with_stdio(false);  加速读入的,加上这条语句可以使cin和cout的速度和scanf和printf差不多.