怎么可以让div自适应屏幕的高度?(已解决)

时间:2022-07-22 00:58:29

  主要解决问题的方法是用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" /> &lt ...

  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&plus;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. 常用数据库的驱动程序及JDBC URL&colon;

    Oracle数据库: 驱动程序包名:ojdbc14.jar 驱动类的名字:oracle.jdbc.driver.OracleDriver JDBC URL:jdbc:oracle:thin:@dbip ...

  2. Lua 练习中的Bug 以及日志

    使用 Lua 中的table.getn获得数组的table的长度:运行失败-- > t ={1,2,3 } > print(table.getn(t)) stdin:1: attempt ...

  3. windows2012R2虚拟机快速激活的方法

    相信Hyper-v管理员都有这样的经历,安装多台虚拟机后,都要一台一台手工激活,如果虚拟机足够多的话,这是一项很繁琐的工作,但从Windows Server 2012 R2开始,就不需要这么做了,微软 ...

  4. POJ 3422 Kaka&amp&semi;&num;39&semi;s Matrix Travels(费用流)

    POJ 3422 Kaka's Matrix Travels 题目链接 题意:一个矩阵.从左上角往右下角走k趟,每次走过数字就变成0,而且获得这个数字,要求走完之后,所获得数字之和最大 思路:有点类似 ...

  5. javascript中的面向对象—— 学习1

    面向对象:Object Oriented(OO) 一切事物皆对象,通过面向对象的方式,将显示世界的事物抽象成对象,将显示世界中的关系抽象成类.继承,帮助人们实现对显示世界的抽象与数字建模:--百科 一 ...

  6. glyph

    glyph[英][glɪf][美][ɡlɪf]n.象形文字; 纵的沟纹; 竖沟; 浮雕;

  7. 201521123027 &lt&semi;java程序设计&gt&semi;第13周学习总结

    1.本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2.书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.e ...

  8. spring 多线程 写入数据库 和 写入 xml文件

    最近工作中遇到一个需求 多线程先爬取页面 然后将爬取的结果持久化到数据库中 ,一些大文本的内容需要持久化到 xml文件中; 下面是运行后的结果: xml 文件写入结果: 数据库写入结果: 再来张项目结 ...

  9. 阿里Fastjson的使用

    Fastjson是一个Java语言编写的高性能功能完善的JSON库.由阿里巴巴公司团队开发的. 主要特性主要体现在以下几个方面: 1.高性能 fastjson采用独创的算法,将parse的速度提升到极 ...

  10. redis缓存设计

    1:缓存技术和框架的重要性 互联网的一些高并发,高性能的项目和系统中,缓存技术是起着功不可没的作用.缓存不仅仅是key-value的简单存取,它在具体的业务场景中,还是很复杂的,需要很强的架构设计能力 ...