如何使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% ,那么 ...
最新文章
- pip is configured with locations that require TLS/SSL 解决
- 在NVIDIA Jetson Xavier NX上安装llvmlite报错：No such file or directory: ‘llvm-config‘: ‘llvm-config‘
- 干货 | 五大实例详解，携程 Redis 跨机房双向同步实践
- box-sizing详解
- [leetcode]541.反转字符串||
- NOIP2002复赛 普及组 第1题
- WeCenter3.1.7 blind xxe 分析
- NFS服务自动搭建及挂载脚本
- 包含html语言的超链接标记的网页_HTML是什么？
- AbortController 中止一个或多个Web请求
- SpringBootTest测试类报错：Suppressed: java.lang.IllegalStateException: Unable to find a @SpringBootCon
- 帆软层次坐标常用公式整理
- 错误解决：当前目录下有so，提示 error while loading shared libraries
- linux中下载安装包
- 室温金刚石共聚焦平台
- 微服务下蓝绿发布、滚动发布、灰度发布等方案
- 企微社群营销如何提升会员活跃度？
- linux gnuplot 教程,图形绘制利器：Gnuplot
- socket介绍--数据的编码与解码
- 35年夜linux版本竞技