为什么h-100不起作用? [英] Why h-100 does not work?
本文介绍了为什么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>问题是，为什么 div 容器的高度不是100％?
The question is, why the div container is not 100 percent height?
谢谢
推荐答案
据我所知，height 100％是div的高度等于其父级，但是这里没有父级.如果要使div的高度等于您的窗口高度，我尝试用div高度= 100vh包裹它. https://jsfiddle.net/goLfLykw/
As my knowledge, height 100% is the div has the height equal to its parent, but here there is no parent for it. If you want to make the div's height equal to your window height, I tried wrap it with a div height = 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>
这篇关于为什么h-100不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
