Question

我正在尝试将div的高度设为视口大小的75％。当我使用像素值时，它会增加它的高度但是当我使用百分比时，它显示为非常细的线并且不会改变。

这是我的HTML：

 <body>
      <div class="container-fluid">
           <div class="row">
                <div class="col-md-8 col-md-offset-2" id="main-wrapper"> </div>
           </div>
      </div>
 </body>

这是我的CSS：

 #main-wrapper {
      background-color: blue;
      height: 75%;
 }

Answer 1

为什么没有指定宽度？，将宽度属性添加到代码中以查看div。

＆＃13;

html,
body,
div {
  width: 100%;
  height: 100%;
}
#main-wrapper {
  background-color: blue;
  height: 75%;
  width: 100%;
}

＆＃13;

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-8 col-md-offset-2" id="main-wrapper">hai</div>
    </div>
  </div>
</body>

＆＃13;

Answer 2

没有必要为div赋予宽度，因为它已经是一个块元素。您需要做的就是指定其父级的高度。

在这种情况下，它可以是row或body元素。

html,
body,
.container-fluid,
.row {
  height: 100%;
}
#main-wrapper {
  background-color: blue;
  height: 75%;
}

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-8 col-md-offset-2" id="main-wrapper">hai</div>
    </div>
  </div>
</body>

注意：不建议在未固定的父级上使用百分比高度，这可能会导致设计问题。

此外，如果您使用的是标准框架，请不要为此目的编辑默认CSS，添加自己的class或id来操纵其高度

Answer 3

正如@NuthanKumar已经提到的那样，您可以使用vh而不是%来表示视口高度。

这是一个例子：

div {
  background-color: blue;
  width: 200px;
  height: 100vh;
}
body {
  margin: 0;
}

<div></div>

如果宽度有问题，请使用vw，这意味着视口宽度。

Answer 4

看到您犯的错误是您将＃main-wrapper的高度提高了75％。＃main-wrapper是.row div的子级，因此它将占据其75％的高度。由于.row height为0，因此0的75％将为0。您需要以像素为单位指定＃main-wrapper高度，或者视口高度，因为您希望高度为视口的75％。因此，以下是CSS代码：

#main-wrapper {
  height: 75vh;
}

希望这会有所帮助）

当我使用百分比值时，为什么我的div的高度不会改变？

4 个答案: