百分比高度HTML 5/CSS

我试图将<div>设置为CSS中的某个百分比高度，但它只是保持与它内部内容相同的大小。当我删除HTML 5 <!DOCTYTPE html>然而，它的工作，<div>占用整个页面所需的。我想让页面进行验证，那么我应该怎么做?

我在<div>上有这样的CSS，它的ID是page:

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

当前回答

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

所以，解决这个问题的方法是设置最小高度:

继续让父元素自动调整它们的高度然后在主div中，用100vh(视口单位)减去页眉和页脚div的像素大小。在css中，像这样:

Min-height: calc(100vh - 246px);

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

2018-11-22 11:27:26

其他回答

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

<！DOCTYPE html > <title> 100% width和height的示例 <时尚> Html, body {height: 100%;保证金:0;｝ Div{高度:100%;宽度:100%;背景:红色;｝ > < /风格 < div > < / div >

2009-10-25 21:15:03

我试图在CSS中设置一个div到一定比例的高度

什么比例?

要设置百分比高度，其父元素(*)必须具有显式高度。这是不言自明的，因为如果你将height设置为auto, block将取其内容的高度…但如果内容本身的高度是以父元素的百分比表示的，那么你就陷入了两难境地。浏览器放弃，只使用内容高度。

因此div的父元素必须有一个显式的height属性。如果你愿意，这个高度也可以是一个百分比，这只是把问题提升到下一个层次。

如果你想让div的高度占视口高度的百分比，每个div的祖先，包括<html>和<body>，必须有高度:100%，所以有一个链显式的百分比高度到div。

(*:或者，如果div被定位，'包含块'，这是最近的祖先也被定位。)

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

div {
    height:100vh; 
}

更多信息请看这里。

2009-10-25 21:17:03

bobince的答案会让你知道在哪些情况下“height: XX%;”是有效的还是无效的。

如果你想创建一个具有固定比例(高度:自身宽度的%)的元素，请使用aspect-ratio属性。确保没有显式地在元素上设置height以使其工作。https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

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

从历史上看，做到这一点的最好方法是使用填充底部来设置高度。正方形的例子:

<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

2013-06-17 22:46:05

你可以用100vw / 100vh。CSS3给了我们视口相关的单元。100vw表示视口宽度的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>

2016-10-26 06:58:16