0

This is a very simple one which I have never ran into before.

Depending on the context of the page, if the app is running directly, it should take the browser window height but otherwise it should be auto.

Just imagine for now that I don't have 2 context. Just 1. Direct. In that case, this following CSS would do what I want.

html, body { 
   height: 100%
}

So perhaps, lets take it further, and make it a class so we can go back to the optional support of both contexts. 

.fit { 
   height: 100%
}

I am aware I could do element.classlist.add('fit') on elements including the document.body. However for the life of me, I cannot figure out how to do that with the window which I presume html{} rule refers to.

How do I set a class (or a direct style) dynamically in this instance?

user1059939
  • 1,613
  • 2
  • 20
  • 37
  • 3
    html is not window, and you have zero reason to ever put styles on the html element since only body content ever gets rendered. That's why there _is_ a body element to begin with (to distinguish it from header markup that should _not_ get rendered in any way). Set your class on body and leave html itself out of your CSS, and things should work just fine. As for "height: 100%", that's probably not what you meant at all. You probably meant `body { height: 100vh; }` because height % is relative to the body. By definition, they are 100% no matter how short or long their content is. – Mike 'Pomax' Kamermans Sep 30 '19 at 16:11
  • I am not sure @Mike'Pomax'Kamermans if I remove `html{}` from my style sheet, the `html` is not 100% height, so it is definitely having an effect. – user1059939 Sep 30 '19 at 16:13
  • So your container should just be using 100% of it's available height? – Icepickle Sep 30 '19 at 16:13
  • 1
    If you want a single page app look, then set `body { position: fixed; top: 0; bottom: 0; left: 0; right: 0; }` and now you have an "always perfectly constrained to the viewport" document. The `html` element itself should not need styling. – Mike 'Pomax' Kamermans Sep 30 '19 at 16:15
  • @Mike'Pomax'Kamermans I appreciate your prompt and factual response. Thank you. – user1059939 Sep 30 '19 at 16:16

0 Answers0