Attempting to create a new type of div using a custom stylesheet with minimal non-bootstrap css. I am trying to convert each style rule from my django static files CSS into a bootstrap class, but I am stuck on viewport-based sizing.
Prior to discovering these docs, the height of the div fit the content as expected:
I came across this amazing feature in Bootstrap 5
Setting my class to "vh-100" made the div take up the full vertical height of the view port.
However, it matched the height of the ENTIRE viewport, not just the remainder after considering the navbar and padding. This made sense though.
Great! All I need is to adjust it slightly so that it fits within the actual viewport for the desired end result.
In Bootstrap documentation, you can usually specify 25%, 50%,75%, or 100% like we did here. However, it doesn't mention that for viewport-based sizing, even though it does for many other bootstrap features. Therefore, I assumed it would work similarly. So I tried setting it to 75% Viewport to add a little bottom area.
Now we have "vh-50" or "vh-75"
Strange - the viewport must be set to 100 or else it reverts back to sizing based on content. I couldn't find any examples of other values for viewport-based sizing in the docs or anywhere else.
Here is the html for that div (part of a jinja content block in a django app)
{% block content %}
<div class="body-area bg-dark text-light my-5 vh-75">
<div class="container">
<div class="row">
Hi
</div>
</div>
</div>
{% endblock %}.body-area {
margin-left: auto;
margin-right: auto;
width: 75%;
border: 10px solid #000000;
border-radius: 15px;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}While I am starting to doubt whether I should even continue, and might not in this particular app, I believe it would be beneficial to be able to size elements based on percentages of the viewport, especially for a mobile app.
Am I approaching this incorrectly? Should I only ever size anything at 100% of the viewport? How should I go about this, either with the bootstrap tool I am trying to use or with some best practice that is currently unknown to me?
I am hoping there are CSS/bootstrap experts out there who know a trick that could help both me and anyone else who comes across this issue in the future.