百分比高度HTML 5 / CSS

StackOverflow https://stackoverflow.com/questions/1622027

  •  06-07-2019
  •  | 
  •  

题

我正在尝试在CSS中将<div>设置为某个百分比高度，但它只是与其中的内容保持相同的大小。当我删除HTML 5 <!DOCTYTPE html>时，它可以正常工作，page根据需要占用整个页面。我希望页面验证，所以我该怎么办？

我在<=>上有这个CSS，其ID为<=>：

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}
有帮助吗？

解决方案

  

我正在尝试在CSS中将div设置为某个百分比高度

百分比是什么？

要设置百分比高度，其父元素（*）必须具有显式高度。这是相当不言而喻的，因为如果你将高度保持为auto，则该块将采用其内容的高度...但是如果内容本身具有以您所做的父级的百分比表示的高度你自己有点Catch 22.浏览器放弃并只使用内容高度。

因此div的父级必须具有明确的height属性。虽然如果你想要的话，这个高度也可以是一个百分比，这只会将问题提升到一个新的水平。

如果你想让div高度占视口高度的百分比，div的每个祖先，包括<html>和<body>，都必须有height: 100%，所以有一系列明确的百分比高度下降到了div。

（*：或者，如果div被定位，<！>＃8216;包含块<！>＃8217;，这是最近的祖先也被定位。）

或者，所有现代浏览器和IE <！> gt; = 9都支持相对于视口高度（vh）和视口宽度（vw）的新CSS单元：

div {
    height:100vh; 
}

请参阅此处了解更多信息。

其他提示

您还需要在<html>和<body>元素上设置高度;否则，它们只会大到足以容纳内容。 例如：

<!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>

bobince的回答会让你知道在哪些情况下<！> quot; height：XX％; <！> quot;将会或不会工作。

如果要创建具有设定比率的元素（高度：其自身宽度的百分比），最好的方法是使用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-换影片

您可以使用100vw / 100vh。 CSS3为我们提供了视口相对单元。 100vw表示100％的视口宽度。 100vh; 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>

有时，您可能希望有条件地设置div的高度，例如当整个内容小于屏幕的高度时。将所有父元素设置为100％将在内容长于屏幕大小时切断内容。

所以，解决这个问题的方法是设置min-height：

继续让父元素自动调整其高度 然后在主div中，从100vh（视口单位）中减去页眉和页脚div的像素大小。在css中，类似于：

min-height：calc（100vh - 246px）;

100vh是屏幕的全长，减去周围的div。 通过设置最小高度而不是高度，比屏幕长的内容将继续流动，而不是被切断。

  

嗨！   要使用百分比（％），您必须定义父元素的百分比。如果你使用 body {height：100％} ，它将无效，因为它的父级高度没有百分比。在这种情况下，为了工作身高，您必须在 html {height：100％}

中添加

在其他情况下，为了摆脱那个定义的父母百分比，你可以使用

<强>体{高度：100vh}

vh 代表视口高度

我认为这有帮助

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top