Reputation: 5
I am creating an Angular application with Bootstrap and i stumbled on a problem. I am trying to size one of my divs in the page where the height is fullscreen, however i have a navigation bar and one other element above this div (i am also using padding from the above element). I want my div to be exactly right height to fit from the last element to the bottom of the page.
Now the problem is, when I set style of my div to 100vh the site doesn't fit and i get a slider to scroll through the whole page. Is this because vh doesn't take the navigation and the other element into account and just set my div to default screen size? And how to correctly repair this problem that it will work the same across any screen?
Upvotes: 0
Views: 45
Reputation: 733
You can have a container div of 100vh
. And inside it your nav bar will be sticky-top
in a child div. And your other child div is the parent of your content.
Upvotes: 0
Reputation: 1274
There are several approaches to get your div
the height you're looking for.
calc
css function. It should be something like this:div {
height: calc(100vh - 60px);
}
Replace the 60px
with the pixel size of your navigation
element.
flexbox
css styles. You'll need to use a column
flexbox setup and flex: 1
on the element you'd like to take up the remaining height.Upvotes: 1