您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

如何使div的浏览器窗口高度为100%

如何使div的浏览器窗口高度为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,可以轻松看到其中的区别!

其他 2022/1/1 18:21:20 有443人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶