Should all HTML containers have css height 100%

Question

I'm very confused over the CSS style height: 100% and page layouts overall.

I typically end up setting html, body, and basically every container to height: 100% because if I want to have let's say 4 elements that split the height evenly, I can set them to height: 25%. Otherwise they will just take up their internal heights and could look really silly. And without their parents set to 100%, well, it won't work at all.

So fine, I give every container height: 100%. But then this has a bad effect if I have another page that should be able to scroll because it has a lot of vertical content and no defined heights. Yes, it will still scroll, but the child element is now technically outside main containers as evident through dev tools.

I think Bootstrap used to set height to 100% for html and body, but they no longer do (maybe I am wrong). Is this a bad design practice overall? What should I do instead of I want some pages to essentially not scroll and some to scroll?

Hope it makes sense and that this fiddle helps explain what I mean.

https://jsfiddle.net/jpzeqs1c/

question from:https://stackoverflow.com/questions/65622753/should-all-html-containers-have-css-height-100

Answer 1

I'm not sure about where you got the idea that every css element needs a 100% height, and it does not need to be used on every single container. Each container is used for different purposes, therefore you need to add the appropriate height, whether that is in px, vh, percents, etc. You can search pixels, percents, and viewport heights to find out which one is most suitable for your div containers. 100% for html and body is fine though. Overflows can be handled with overflow-x and overflow-y, and if you want to be able to scroll through the content you can use something like overflow-x:scroll;