分析div自动适应浏览器的高度
前端人员之间有一个普遍存在的问题,如何让一个div的高度自动延伸到浏览窗口100%的高度,在布局中,我们有时会用到高度自适应,例如,我们定义了一个 div,并且希望它的高度为窗口高度的100% ,那么我们该如何编写代码呢?用height:100%就可以了。但要注意的是,浏览器对css的解析方式有一点差异。我们需要弄清楚100% 到底是谁占谁的100%,让我给你另外一种方式来思考HTML,几乎每一个HTML文件都有一组容器彼此包含的。因此,在我们的页面里面,首先我们有一个<html>容器,其次<body>容器包含在<html>里,最后才是<div id=”content”></div>容器包含在里面。当我们往任何一个容器里面放置内容的时候,这个容器和包含此容器的父容器盒子都会自动延伸的,从而能容下这些新添加的内容。也就是说,当我们往<div id=”content”></div>容器盒子添加文字内容的时候,这个div容器盒子是自动延伸的,包含这个div容器的父容器盒子(body与html)依次是自动延伸的。 当我们给<div id=”content”></div>容器定义“height:100%”样式时,我们现在做的就是告诉它让其高度延伸到包含它的父容器的整个高度。这个div容器被包含在<body>容器里面,所以<div id=”content”></div>就是body的整个高度。好了,body容器是如何延伸增长的那?它就像<div id=”content”></div>的高度一样,因为我们从来没有告诉它如何增高的。所以当我们给<div id=”content”></div>定义“height:100%”样式的时候,我们仅仅告诉了它自己。 解决此问题,我需要告诉<body>容器变的大一些儿,同时<html>容器也会出现同样的问题,它应该与<body>一样大。用百分比要设置高度时,需要明确父级对象的高度。要不然浏览器会使用默认值。所以,要是实现开始所说的布局,代码应该这样写: html ,body{height:100%;} |
转自: http://www.nnit30.com/news/news.asp?ArticleID=5698
分析div自动适应浏览器的高度相关推荐
- 让div元素自适应浏览器屏幕高度
很多时候都需要让div或者其他标签元素自适应浏览器屏幕高度,比如左侧菜单高度自适应 所以可以用window.innerHeight然后绑定到元素上面 如图,我用vue,jq的也差不多.反正只要获取到w ...
- 一个div分上下两部分,上部分高度不固定,下面部分自动填满剩余高度
div自动填满剩余高度 html <div class="wrapper" style="height:800px;"><div class= ...
- css 控制div高度自适应浏览器的高度
css 控制div高度自适应浏览器的高度 1 <html> 2 <head> 3 <style> 4 #myTable{height:100%;border:sol ...
- 如何使div的浏览器窗口高度为100%
我有两列的布局-左div和右div. 右边div有一个灰色background-color,我需要根据用户浏览器窗口的高度垂直扩展它.现在background-color结束于该内容的最后一部分div ...
- html div 自动适应屏幕,css怎么让高度自适应屏幕高度?
在一个DIV中有多个未知高度的子元素DIV,怎样通过CSS实现子元素div同高或怎样实现同行div按照内容最多的那个设置高度.下面我们来看一下css设置高度自适应屏幕高度的方法. 首先,我们刚开始设计 ...
- JS实现-DIV自动居中代码
其实想让整个DIV盒子在页面实现自动居中非常简单,只需要一小段JS代码代码就可以实现.有时候我们做页面效果也好,做程序功能的开发也好.只要思路理清楚了,相信做起来会非常的得心应手. 下面就跟大家一起简 ...
- html 点击div 改变高度,HTML / CSS将div设置为同级的高度
我有三分之二的div.所包含的div之一向左浮动,另一个向右浮动.我希望2个同级div始终处于相同的高度,但是对此存在问题.到目前为止,我只在Firefox中查看该页面,并认为在至少一个浏览器中运行它 ...
- jq获取页面高度_通过 jQuery 获取浏览器窗口高度问题
我曾经在使用jQuery一些东西的时候碰到了这样一些奇怪的问题.例如,我尝试着用 jQuery 的 $(window).height() 来获取浏览器窗口高度,就遇到了问题. 理论上,$(window ...
- 52 jQuery-使用slideToggle()方法的动画效果自动切换图片的高度
1.效果图 2.HTML代码 <!DOCTYPE html> <html> <head><meta charset="utf-8"> ...
最新文章
- Django博客系统(文章模型)
- 集成两路MAX1169的STC8G1K08模块,带有两路PWM输出
- yolov5 onnx
- python类装饰器详解-Python类中的装饰器在当前类中的声明与调用详解
- 成功解决ValueError: not enough values to unpack (expected 2, got 1)
- javascript window.confirm确认 取消对话框实现代码小结
- 学习react心得及总结
- 开源云计算平台 abiCloud
- 10.28T5 tarjan+dfs
- 采用python语言实现猜数游戏_用python实现猜数游戏
- 第三章 MongoDb Java应用 3.1
- Spring系列技术实战(项目搭建、知识点总结)
- 在Ubuntu18.04.3系统中安装谷歌拼音输入法(Google Pinyin)
- 『工程项目实践』表格识别 — V2.0
- python充电时刻
- 致初学者:如何学好Python这门编程语言?
- 英语发音规则---B字母
- 微波雷达传感器感应模块,智能安防过滤雨水树叶干扰技术应用
- python人像录制加声音_简单易用的录制屏幕与摄像头工具
- 软件设计师——100
热门文章
- 网络历史之诸葛亮01
- typescript 错误码大全
- C语言之前的A、B语言又是什么?(计算机语言发展史)
- 年度盘点丨2017年全球物联网领域信息安全大事记
- RK3128 Android 7 BOX SDK 应用无法接收广播自启 + 眠休不黑屏问题
- 研究贝塞尔曲线, 定距等分 ...
- 铱配合物(btp)Ir(L1)Cl|(mtfpmt)2Ir(L1)Cl|(mtfpmt)2Ir(phen)Cl|(mtfpmt)2Ir(bpy)Cl|(btp)2Ir(L2)Cl磷光金属复合物
- php中rbac三张表的关系,财务人不可不知的三张表的关系
- qdialog隐藏关闭按钮_宝马隐藏功能大分享!别说没告诉你...
- ok架构,gson解析,glide图片解析,eventbus传值购物车