为什么h-100不起作用？

Question

为什么h-100不起作用？

我有以下布局:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <title>Bootstrap</title>
</head>
<body>

<div class="container bg-danger h-100">
  <div class="bg-warning border p-1">Exotic</div>
  <div class="bg-warning border p-1">Grooming</div>
  <div class="bg-warning border p-1">Health</div>
  <div class="bg-warning border p-1">Nutrition</div>
  <div class="bg-warning border p-1">Pests</div>
  <div class="bg-warning border p-1">Vaccinations</div>
</div><!-- container -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

问题是,为什么div容器不是100%的高度？

谢谢

Answer 1

vic*_*oob 9

据我所知,高度100%是div的高度等于其父级,但这里没有父级.如果你想让div的高度等于你的窗口高度,我尝试用div高度= 100vh包裹它.https://jsfiddle.net/goLfLykw/

    <div style="height: 100vh">
      <div class="container bg-danger h-100">
        <div class="bg-warning border p-1">Exotic</div>
        <div class="bg-warning border p-1">Grooming</div>
        <div class="bg-warning border p-1">Health</div>
        <div class="bg-warning border p-1">Nutrition</div>
        <div class="bg-warning border p-1">Pests</div>
        <div class="bg-warning border p-1">Vaccinations</div>
      </div>
      <!-- container -->
    </div>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Tom*_*uer 6

您应该能够将 HTML 和 BODY 高度设置为 100%，以便divs 父级充满视口高度，然后 div 应该在那里伸展。这很容易用 flexbox 实现：

html { height: 100%; }
body { height: 100%; display: flex; }
body > div { flex: 1; }

Run Code Online (Sandbox Code Playgroud)

这应该在整个视口中拉伸 div。

归档时间：	7 年，5 月前
查看次数：	8507 次
最近记录：	7 年，5 月前