Menu
I have the following layout:
<!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>The question is, why the div container is not 100 percent height?
Thanks
933
Try setting the height of the html element to 100% as well. Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well. However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.
H100 or H-100 may refer to: H. 100 (computer telephony), a standard for communication between PCI cards in a computer telephony system. H100 series, a diesel multiple unit train in Japan.
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>
You should be able to set HTML and BODY heights to 100 % so that the divs parent is full of viewport height, then the div should stretch there. This is easy to achieve with flexbox:
html { height: 100%; }
body { height: 100%; display: flex; }
body > div { flex: 1; }
This should stretch the div across the entire viewport.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
