为什么百分比高度在HTML/CSS中不起作用？

ghhaqwfi 于 12个月前发布在其他

关注(0)|答案(7)|浏览(137)

我试图在CSS中将<div>设置为特定百分比的高度，但它只是保持与其中内容相同的大小。然而，当我删除<!DOCTYTPE html>时，它可以工作; <div>根据需要占据整个页面。我希望页面验证，那么我应该怎么做？
我在<div>上有这个CSS，它的ID是page：

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

字符串

css

来源：https://stackoverflow.com/questions/1622027/why-doesnt-percentage-height-work-in-html-css

7条答案

按热度按时间

8qgya5xd1#

我试图在CSS中设置一个div到一定的高度百分比
什么百分比？
要设置一个百分比高度，它的父元素（）必须有一个显式的高度。这是相当不言自明的，因为如果你把高度设置为auto，块将采用其内容的高度.
所以div的父元素必须有一个显式的height属性。如果你愿意的话，这个高度也可以是一个百分比，这只是把问题带到了下一个层次。
如果你想让div的高度是viewport高度的一个百分比，div的每个祖先，包括<html>和<body>，都必须有height: 100%，所以有一个明确的百分比高度链。
（：或者，如果div被定位，则为“包含块”，它是也被定位的最近的祖先。
或者，所有现代浏览器和IE>=9支持新的CSS单位相对于viewport高度（vh）和viewport宽度（vw）：

div {
    height:100vh; 
}

字符串
这里是more info。

赞(0）回复(0）举报 12个月前

q9yhzks02#

您还需要在<html>和<body>元素上设置高度;否则，它们的大小将仅足以容纳内容。For example：

<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>

字符串

赞(0）回复(0）举报 12个月前

laawzig23#

bobince的回答会让你知道在哪些情况下“height：XX%;”会或不会起作用。
如果你想创建一个元素，它的高度是它自身宽度的百分比，请使用aspect-ratio属性。确保没有显式地设置元素的高度。https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

.square {
  width: 100%;
  height: unset;
  aspect-ratio: 1 / 1;
}

字符串
从历史上看，最好的方法是使用padding-bottom设置高度。例如square：

<div class="square-container">
  <div class="square-content">
    <!-- put your content in here -->
  </div>
</div>

.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

型
正方形容器将由填充物组成，内容将扩展以填充容器。2009年关于此主题的长文：http://alistapart.com/article/creating-intrinsic-ratios-for-video

赞(0）回复(0）举报 12个月前

9gm1akwq4#

为了使用百分比（%），你必须定义其父元素的%。如果你使用**body{height: 100%}，它将不起作用，因为它的父元素在高度上没有百分比。在这种情况下，为了工作，body height你必须在html{height:100%}**中添加这个
在其他情况下，为了摆脱定义父百分比，您可以使用
body{height:100vh}个

vh代表viewport height

赞(0）回复(0）举报 12个月前

kgsdhlau5#

你可以使用100vw / 100vh。CSS3给了我们相对于视口的单位。100 vw意味着100%的视口宽度。100 vh; 100%的高度。

<div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
        <div style="width:70%; height: 100%; border: 2px dashed red"></div>
        <div style="width:30%; height: 100%; border: 2px dashed red"></div>
    </div>

字符串

赞(0）回复(0）举报 12个月前

2ekbmq326#

有时，您可能希望有条件地设置div的高度，例如当整个内容小于屏幕的高度时。将所有父元素设置为100%将在内容长于屏幕尺寸时切断内容。
所以，解决这个问题的方法是设置min-height：
继续让父元素自动调整它们的高度然后在主div中，从100 vh（viewport单位）中减去页眉和页脚div的像素大小。在css中，类似于：
min-height：calc（100vh - 246px）;
100 vh是屏幕的全长，减去周围的div。通过设置min-height而不是height，比屏幕长的内容将继续流动，而不是被切断。

赞(0）回复(0）举报 12个月前

weylhg0b7#

有了新的CSS大小属性，你可以不用在parent上设置精确的高度。新的block-size和inline-size属性可以这样使用：

<!DOCTYPE html>
<style>
  #parent {
    border: 1px dotted gray;
    height: auto;   /* auto values */
    width: auto;
  }

  #wrapper {
    background-color: violet;
    writing-mode: vertical-lr;
    block-size: 30%;
    inline-size: 70%;
  }

  #child {
    background-color: wheat;
    writing-mode: horizontal-tb;
    width: 30%;  /* set to 100% if you don't want to expose wrapper */
    height: 70%; /* none of the parent has exact height set */
  }
</style>

<body>
  <div id=parent>
    <div id=wrapper>
      <div id=child>Lorem ipsum dollar...</div>

字符串
在全页模式下调整浏览器窗口的大小。我认为这些值是相对于视口的高度和宽度的。
更多信息请参考：https://www.w3.org/TR/css-sizing-3/
几乎所有的浏览器都支持它：https://caniuse.com/?search=inline-size

赞(0）回复(0）举报 12个月前

我来回答

为什么百分比高度在HTML/CSS中不起作用？

7条答案

相关问题

热门标签

最新问答