如何使div的浏览器窗口高度为100％
我有两列的布局-左div和右div。
右边div有一个灰色background-color，我需要根据用户浏览器窗口的高度垂直扩展它。现在background-color结束于该内容的最后一部分div。
我试过height:100%，min-height:100%;等
有几个CSS 3度量单位，称为：
视口百分比（或相对于视口）长度
什么是视口百分比长度？
根据上面链接的W3候选推荐书：
视口百分比长度相对于初始包含块的大小。更改初始包含块的高度或宽度时，将对其进行相应缩放。
这些单位是vh（视口高度），vw（视口宽度），vmin（视口最小长度）和vmax（视口最大长度）。
如何使用它来使分隔符填充浏览器的高度？
对于这个问题，我们可以使用vh：1vh等于视口高度的1％。也就是说100vh，无论元素在DOM树中位于什么位置，它都等于浏览器窗口的高度：
的HTML
<div></div>
的CSS
div {height: 100vh;
}
这实际上就是所需要的。这是一个正在使用的JSFiddle示例。
哪些浏览器支持这些新单元？
目前，除Opera Mini之外，所有最新的主流浏览器均支持此功能。请查看我可以使用...以获得更多支持。
如何将其与多列一起使用？
对于带有左分隔线和右分隔线的当前问题，这是一个JSFiddle示例，该示例显示了一个两列布局，其中涉及vh到vw。
如何100vh不同100%？
以以下布局为例：
<body style="height: 100%"><div style="height: 200px"><p style="height: 100%; display: block;">Hello, world!</p></div>
</body>
p此处的标签设置为100％高度，但由于其包含的div高度为200像素，因此200像素中的100％变为200像素，而不是body高度的100％。100vh改为使用表示p标签的高度将为100％的高度，body而与div高度无关。看看这个随附的JSFiddle，可以轻松看到其中的区别！
本文首发于前端黑洞网，csdn同步跟新
如何使div的浏览器窗口高度为100％相关推荐
- css div撑满窗口高度_如何使用CSS将div的高度设置为窗口的100％？
css div撑满窗口高度 Introduction: 介绍: Hello there developers! Well, certainly if you are reading this arti ...
- jq获取页面高度_通过 jQuery 获取浏览器窗口高度问题
我曾经在使用jQuery一些东西的时候碰到了这样一些奇怪的问题.例如,我尝试着用 jQuery 的 $(window).height() 来获取浏览器窗口高度,就遇到了问题. 理论上,$(window ...
- 获取浏览器窗口高度和宽度兼容IE
代码如下 // 浏览器窗口的宽度,兼容 Internet Explorer 8, 7, 6, 5 function getClientWidth(){return window.innerWidth ...
- 如何使flexbox子代的父母高度为100％？
本文翻译自:How to make flexbox children 100% height of their parent? I'm trying to fill the vertical spac ...
- 关于Div的宽度与高度的100%设定
正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从 ...
- Div的宽度与高度的100%设定
div的100%是从其上一级div的宽高继承来的,有一点很关键,就是要设置div100%显示,必须设置其上一级div的宽度或高度,否则无效. 举例说明:父div宽300高200,子div如果在这个条件 ...
- js设置body高度、宽度为浏览器窗口高度、宽度
window.onload = () => {document.getElementsByTagName("body")[0].style.height = document ...
- Vue3动态获取浏览器窗口高度
获取 使用
- 分析div自动适应浏览器的高度
前端人员之间有一个普遍存在的问题,如何让一个div的高度自动延伸到浏览窗口100%的高度,在布局中,我们有时会用到高度自适应,例如,我们定义了一个 div,并且希望它的高度为窗口高度的100% ,那么 ...
最新文章
- 转载：QT图形视图框架(The Graphics View Framework)
- DBA（四）：数据读写分离，MySQL多实例操作
- Mahout快速入门教程
- 虚拟机和Linux系统的安装
- [翻译]Windows Vista的秘密#11: 删除不可删除的东西
- 问题集锦13：数据库升级后，程序无法连接数据库
- linux-文件的类型
- Map-Reduce原理
- java遮罩层_页面遮罩层 - javaalex的个人空间 - OSCHINA - 中文开源技术交流社区
- innodb事务锁的一些常见数据结构
- 给创业者们推荐一个好的工具
- http学习笔记（四）——HTTP报文
- java和python互相调用
- 数据中心效率：40％的改进是通过最佳实践方案
- Java 12网络编程
- python字符串变量替换_Python基于template实现字符串替换
- 《Labeled Data Generation with Inexact Supervision》 KDD-2021 论文阅读
- 三分钟，带你了解PLM
- 投影仪光源与亮度科普
- java 计时 纳秒_Java精确测量代码运行时间 代码执行时间 纳秒 nanoTime