CODEWITHSUNDEEP
css
Vaibhav Jain
Vaibhav Jain

Reputation: 5507

CSS expression for "screen height - (header + footer height)"

I have a HTML page which contains <header>, <section> and <footer>. And I want to set section min-height to screen height - (header + footer height). Is that possible?

section{
    min-height: screen-height-(header + footer height)
}

Upvotes: 0

Views: 84

Answers (1)

knitevision
knitevision

Reputation: 3143

Use preprocessors. SASS/LESS/Stylus.

LESS Example:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

LESS Docs link

However, if you want to have manipulations based on screen height, preprocessors can't detect screen height, you will have to use JavaScript/jQuery for that.

Upvotes: 2

Related Questions