gpt4 book ai didi

html - 百分比高度 HTML 5/CSS

转载 作者:IT老高 更新时间:2023-10-28 11:09:37 25 4
gpt4 key购买 nike

我正在尝试设置 <div>到 CSS 中的某个百分比高度,但它只是保持与其中内容相同的大小。当我删除 HTML 5 <!DOCTYTPE html>但是,它有效,<div>根据需要占据整个页面。我想验证页面,我应该怎么做?

我在 <div> 上有这个 CSS ,其 ID 为 page :

#page {
padding: 10px;
background-color: white;
height: 90% !important;
}

最佳答案

I am trying to set a div to a certain percentage height in CSS

百分之几?

要设置百分比高度,其父元素 (*) 必须具有明确的高度。这是不言而喻的,因为如果您将高度保留为 auto ,该 block 将采用其内容的高度......但如果内容本身具有以父级百分比表示的高度,那么您已经让自己成为了一点 Catch 22。浏览器放弃并只使用内容高度。

所以 div 的父级必须有一个显式的 height属性(property)。如果你愿意,这个高度也可以是一个百分比,这只是将问题提升到一个新的水平。

如果你想让 div 高度是视口(viewport)高度的百分比,则 div 的每个祖先,包括 <html><body> , 必须有 height: 100% ,所以有一个明确的百分比高度链到 div。

(*: 或者,如果 div 已定位,则为“包含 block ”,它也是要定位的最近的祖先。)

另外,所有现代浏览器和 IE>=9 都支持相对于视口(viewport)高度 (vh) 和视口(viewport)宽度 (vw) 的新 CSS 单位:

div {
height:100vh;
}

查看这里查看 more info .

关于html - 百分比高度 HTML 5/CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1622027/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com