怎么可以让div自适应屏幕的高度?(已解决)
主要解决问题的方法是用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自适应屏幕的高度?(已解决)的更多相关文章
- Div 自适应屏幕大小
http://blog.csdn.net/wodetiankong516/article/details/7827256 Background 有时, 我们需要将div或者其他的Elemen ...
- 利用 Javascript 让 DIV 自适应屏幕的分辨率,从而决定是否显示滚动条
直接贴代码了: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- css实现自适应屏幕高度;
css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...
- 【笔记】css 实现宽度自适应屏幕 高度自适应宽度
如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...
- 关于自适应屏幕,设置子元素浮动,父div不能包裹子div,子元素中内容溢出的问题。
设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...
- DIV+CSS布局中自适应高度的解决方法
div乱跑问题 (文件<DIV+CSS布局中自适应高度的解决方法.rar>) float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...
- div自适应高度
div自适应高度 Div即父容器不根据内容自适应高度,我们看下面的代码: <div id="main"> <div id="content"& ...
- js自适应屏幕高度
//自适应屏幕高度 $(window).resize(function() { hightChange(); }); function hightChange(){ ; $();// iframe i ...
- 外部div自适应内部标签的高度,设置最小高度、最大高度
一.div自适应高度:在前端开发中经常需要让外层的div自动适应内部标签和内容的高度,内部标签可能是<div>.<ul>.<ol>或者文字等各种内容.造成外层的di ...
随机推荐
- 初识c#
我记得我刚学c#的时候是在大一的下学期,那时候我在的学校是一个专科,因为我大一上学期学了c语言,对语言还蛮感兴趣,所以学的不错,在最后的考试是考的成绩还算可以,就考上了我们学校的教改班,那时候就是想好 ...
- 【转】PHP的Trait 特性
Trait是在PHP5.4中加入的,它既不是接口也不是类.主要是为了解决单继承语言的限制.是PHP多重继承的一种解决方案.例如,需要同时继承两个 Abstract Class, 这将会是件很麻烦的事情 ...
- 通过JSch编写上传、下载文件
package com.hct.util; /** * @作者: HCT * @时间:2016年12月29日下午3:13:20 * @描述: * */ import java.io.*; import ...
- C 标准库系列之assert.h
先简单介绍一下<assert.h>头文件,该头文件的目的便是提供一个宏assert的定义,即可以在程序必要的地方使用其进行断言处理:断言在程序中的作用是当在调试模式下时,若程序给出的前提条 ...
- 12.Java中Comparable接口,Readable接口和Iterable接口
1.Comparable接口 说明:可比较(可排序的) 例子:按照MyClass的y属性进行生序排序 class MyClass implements Comparable<MyClass> ...
- POJ 1979 Red and Black【DFS】
标准DFS,统计遍历过程中遇到的黑点个数 #include<cstdio> #include<vector> #include<queue> #include< ...
- IMEI串号
IMEI串号就是国际移动设备身份码,是电子设备的唯一身份证,由于它的唯一性,它可以用来查询电子设备的保修期还有产地,可以说用处直逼人民的身份证啊! 在拨号键盘页面 输入[*#06#]五个字符
- Axure 自适应视图
假设B为A的子视图 继承: A更新 文字内容.交互事件.禁用: 位置.尺寸.样式.交互样式 时, B都会继承响应更新变化 B更新 文字内容.交互事件.禁用时,A也会更新 B更新 位置.尺寸.样式.交互 ...
- Makefile笔记之二------make的递归执行
1.make的递归过程指的是: 在Makefile中使用"make"作为一个命令来执行本身或者其它makefile文件的过程. 2.递归的意义: 当前目录下存在一个"su ...
- 公共资源情报(OSINT)工具Automater
公共资源情报(OSINT)工具Automater 公共资源情报(OSINT)就是从公共信息中提取有用情报.它是美国中央情报局(CIA)的一种情报搜集手段,各国都在广泛利用这种方式.Kali Lin ...