怎么可以让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 ...
随机推荐
- Xcode 常用快捷键
一.Xcode基本快捷键 1.1.新建项目 Shift + CMD + N 1.2.项目中新建文件 CMD + N 1.3.运行 CMD + R 1.4.编译 CMD + B 1.5.停止运行 CMD ...
- wpf 悬浮窗口的实现
又到了写点东西的时候,因为有了新的收获,所以用随笔来记录下自己的成长.话不多说,正入主题. 最近又遇到一个新的需求,有一组控件,需要悬浮显示在面板的边缘上,刚开始的时候,是不显示的,点击后显示,然后再 ...
- Java实现画八卦
八卦是由多个圆叠加而成,如果我们让每个圆都有自己的颜色,那么具体结构便一目了然,如下图所示: 显然只要令对应的圆颜色相同,就能达到我们预期的效果. 用Java就能轻松画出来: import java. ...
- C#设置IE代理及遇到问题的解决方案
起初使用的方法是修改完一次代理之后就不能继续修改,需要重新启动一次进程才可以,最初代码是: private void ShowProxyInfo() { if (!GetProxyStatus()) ...
- 【leetcode】Largest Number
题目简述: Given a list of non negative integers, arrange them such that they form the largest number. Fo ...
- Python-面向对象
面向过程变成:函数式变成,C程序等 面向对象编程:C++,Java,Python等 类和对象: 类:是对事物的抽象,比如人类.球类 对象:是类的一个实例,比如足球.篮球 实例说明: 球类可以对 ...
- ASP.Net Core 里是如何把一个普通的 Action 返回类型转换为某种 IActionResult 的
秘密在于这个类型: Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker 在它的 CreateActionResult 方法里会将相关类型 ...
- asterisk简单命令
重启asterisk [root@EC2-V2 ~]# service asterisk restart 进入asterisk操作界面 [root@EC2-V2 ~]# asterisk -vvvr ...
- 【Mybatis架构】 延迟加载
在上一篇博客中,我们提到过有关于Mybatis输出映射中resultMap能够实现延迟加载的事,然而真的是所有的resultMap都能实现延迟加载还是咋地啊?现在我们就来对那一句话做一下阐述和实例说明 ...
- The innocence is brilliant.
[11.20~12.20] 2016年的最后一个月在听Avril的歌,感觉她发音状态好好(对此建议去听<Wish You Were Here>!!!) 到此12月份的活都干完了吧~还剩最后 ...