CODEWITHSUNDEEP
htmlcss
musicformellons
musicformellons

Reputation: 13383

CSS height as a variable and how to calculate 60% of total screen size

Using Bootstrap (and its Navbar) I have a jumbotron which starts at 30% from the top of the screen size. I did that using css: top=30%. In addition I have a Navbar which drops down a menu when mobile sized. The dropdown navbar menu should cover the jumbotron always (all screen sizes).

So mathematically the navbar dropdown size should be 30% of screensize + height in pixels of the jumbotron (lets say fixed for now, but might vary according to screen size...).

Currently I can adjust the height of the navbar dropdown menu using this:

.navbar-nav > li > a {
    height: 40px;
    padding-top: 15px;
}

However these are fixed values and I want them to be calculated as described as variables (preferably with a 'minimum total height' of the dropdown menu so it will never be too small).

I am new to bootstrap and UI design etc. So how should one do this?

Upvotes: 1

Views: 1924

Answers (1)

Rosmarine Popcorn
Rosmarine Popcorn

Reputation: 10967

You can use viewport height CSS property for that and use the calc() function of CSS3 arithmetics like so: 

.navbar-nav > li > a {
    height: calc(30vh + 10px);
}

Upvotes: 2

Related Questions