CODEWITHSUNDEEP
cssgoogle-chromeviewport-unitscss-calc
user2264309
user2264309

Reputation: 33

calc() and vh workaround for chrome?

Is there a strictly css only workaround for using vh in calc() functions for chrome?

I need to have a browser use calc(100vh - 25px) for a top margin to sticky a 25px bar on the bottom of the page, but chrome is giving me issues.

Upvotes: 2

Views: 2063

Answers (1)

James Donnelly
James Donnelly

Reputation: 128791

If you set your element's box-sizing property to border-box, you can then give it 25px padding at the bottom, then allow the 25px bar to sit on top by also giving it a negative 25px margin:

elem {
    box-sizing: border-box;
    height: 100vh;
    margin-bottom: -25px;
    padding-bottom: 25px;
}

You may then need to play around with your elements' z-index property to ensure your 25px bar is displayed on top of the other element.

JSFiddle demo.

The padding is used to prevent any content from appearing under our 25px bar.

 --------------     --------------     --------------
|              |   |              |   |              |
| 100vh        |   |  100vh       |   |  100vh       |
|              |   |              |   |              |
|              |   |--------------|   |--------------| 25px padding, -25px margin
|              |   | 25px padding |   | 25px bar     |
 --------------     --------------     --------------
| 25px bar     |   | 25px bar     |
 --------------     --------------

Upvotes: 2

Related Questions