高度百分比HTML 5 / CSS
我试图<div>在CSS 中将a设置为一定的百分比高度，但它的大小与其中的内容相同。<!DOCTYTPE html>但是，当我删除HTML 5
时，它可以工作，<div>并按需要占用整个页面。我希望页面进行验证，那我该怎么办？
我在上有此CSS <div>，其ID为page：
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
问题答案：
我正在尝试在CSS中将div设置为某个百分比高度
百分比是多少？
要设置百分比高度，其父元素（*）必须具有明确的高度。这是不言而喻的，如果您将height保留为auto，则该块将获取其内容的高度…但是，如果内容本身的高度以父级的百分比表示，则您会使自己有点捕获22.浏览器放弃了，只使用内容的高度。
因此div的父级必须具有显式height属性。如果您愿意的话，这个高度也可以是一个百分比，但这只会使问题上移。
如果要将div高度设置为视口高度的百分比，则div的每个祖先（包括<html>和<body>）都必须具有height:100%，因此存在一个明确的百分比高度下降到div的链。
（*：或者，如果div被定位，则是“包含块”，它也是要定位的最接近的祖先。）
另外，相对于视口高度（vh）和视口宽度（vw），所有现代浏览器和IE> = 9都支持新的CSS单位：
div {
height:100vh;
}
-
我有一个基本的flexbox布局，我正在尝试应用高度百分比，目前他们都占据相同的百分比… 这在FlexBox中是可能的吗？如果是的话，有没有人可以给我一个例子呢？
-
问题内容： 这个问题已经在这里有了答案 ： 高度百分比HTML 5 / CSS （6个答案） 3年前关闭。 我有以下简单的代码： 但是div不会以高度为100％显示。为什么？ 问题答案： 您需要在所有父元素上设置100％的高度，在这种情况下，您的正文和html都应设置为100％。这个小提琴显示它正常工作。
-
问题内容： 我希望在我的网站上有一个百分比圆圈指示器 在这种情况下，显示为75％。应该怎么做？我在图像文件中有一个黄色圆圈，但是如果更容易使用CSS来完成所有操作，那么我可以。 问题答案： 考虑到进度条的形状（结束/开始是四舍五入的），我建议使用SVG。 演示：径向进度栏 径向进度栏 在以下示例中，使用stroke-dasarray属性为进度设置动画效果，并使用jQuery将％数字递增： 不幸的是
-
问题内容： 假设我的div的宽度为正文的50％。如何使其高度等于该值？因此，当浏览器窗口的宽度为1000px时，div的高度和宽度均为500px。 问题答案： 这可以通过CSS hack完成（请参见其他答案），但是也可以使用JavaScript轻松完成。 将div的宽度设置为（例如）50％，使用JavaScript检查其宽度，然后相应地设置高度。这是使用jQuery的代码示例： 如果希望框随着浏览
-
我在页面上有一个嵌入式草图查看器，想要保持3/2的宽高比。因此作为示例，如果Height=300px则宽度=200px。宽度需要基于百分比（div的100%），高度计算为生成宽度的百分比。 随机猜测：高度：（宽度的66%）；与高度相似：（与宽度相同）； 有没有办法做到这一点？
-
我想使用FXML在JavaFX中创建一个包含3列的GridPane。中柱上有一个大标签。中间列采用标签的宽度。左栏和右栏各占表单剩余宽度的一半（50%）。我尝试将百分之五十的宽度设置为左栏和右栏。但是，宽度设置为整个形状的50%，而不是剩余宽度。例如，表单的宽度为1000px。中柱可能需要400px，而左柱和右柱各自需要300px。即使窗体在运行时调整大小，此公式也应保持不变。