怎么可以让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 ...
随机推荐
- 动态创建DAL层类的实例
为了可扩展性,方便以后对于代码的修改维护,使用动态创建DAL层对象. 1.首先在webconfig中的configuration下添加配置项 <appSettings> <add k ...
- C#重启IIS指定网站和指定应用程序池
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- tif文件导入postgresql
raster2pgsql -I -F -N -999 文件名 数据库名 | psql -U postgres -d postgres
- VS2012 集成 IL DASM IL微软中间语言查看器
第一步: 找到IL DASM的安装位置,默认在C:\Program Files (x86)\Microsoft SDKs\Windows\v8.0A\bin\NETFX 4.0 Tools 第二步: ...
- ethhdr、ether_header、iphdr、tcphdr、udphdr 结构介绍
转自:http://blog.csdn.net/petershina/article/details/8573853 ************************eth的结构*********** ...
- Knockout.js随手记(8)
visible, disable, css绑定 这个例子非常简单,主要演示如何通过属性控制html元素的显示与否(visible),可用性(disable)以及根据属性添加相应的CSS样式. 先简单的 ...
- abstract与interface的区别
abstract的用法: //通过abstract 关键字修饰的类叫抽象类. abstract class Animal { String name; String color; abstract p ...
- jQuery中的事件绑定方法
在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...
- 域名解析服务查询工具dnstracer
域名解析服务查询工具dnstracer 在访问网站过程中,当用户输入网址后,通常是先解析域名,获取该网站的IP地址.然后,根据IP地址访问对应的网站服务器.所以,域名解析服务器保证域名指向正确的网 ...
- Redis——学习之路一(初识redis)
在接下来的一段时间里面我要将自己学习的redis整理一遍,下面是我整理的一些资料: Redis是一款依据BSD开源协议发行的高性能Key-Value存储系统(cache and store),所以re ...