CODEWITHSUNDEEP
cssangular
lvl60paladin
lvl60paladin

Reputation: 5

How to correctly set height of html elements that it fits in different screens?


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

Answers (2)

Antediluvian
Antediluvian

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

Flignats
Flignats

Reputation: 1274

There are several approaches to get your div the height you're looking for.

  • Use the 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.

  • [Alternate solution] Use 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

Related Questions