I am a student. Bumped into inadequate behavior in the adaptive element (in Chrome in smartphone imitation mode). In short, the problem is visible when its ancestor has a height: 100vh; rule height: 100vh; , if, instead, put him and <html> and <body> height 100% - everything becomes good. I don’t see any problem in firefox.

Is it generally normal to put any height for <html> and <body> ?

  • 2
    Curious indeed. And what about the heights of <html> and <body> ? - Aleksandr Shemetillo

3 answers 3

Yes, for html and for body, you can also set different css-rules, including height.

For the future, when the next questions arise, “Do they do this in principle?”, Look at the answers to them from professionals, for example, at least here:

enter image description here

  • It was worth paying attention that here, unlike the question height: 100% stands only for html - Grundy
  • Thank. Yes, I looked here and on several other sites. Somewhere installed, somewhere - no. I heard somewhere that tagging the rules is a great sin. So I sought the opinions of living people. - Aleksandr Shemetillo

Aleksandr Shemetillo, look at my example and think why the background is not red at the moment? Then uncomment /*height: 100%;*/ and the background will turn red ... But if #wrapper set to height: not in percents, it will be visible ... This is me to the fact that initially the body no height. If you want to never make mistakes, make a habit of yourself. Start the main css file from these lines below ...

 *{ margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } 

 *, * ::after, *::before { margin: 0; padding: 0; } html, body { width: 100%; /*height: 100%;*/ background: #272727; color: white; } #wrapper { width: 100%; height: 100%; background: #f00; } 
 <div id="wrapper"></div>

  • Thanks for answers. But you answer not quite my question, but rather your interpretation of it. The example is clear to me, but in my case it was rather like this, approximately: html, body { /* height: 100%; */ } #wrapper { height: 100vh; } html, body { /* height: 100%; */ } #wrapper { height: 100vh; } html, body { /* height: 100%; */ } #wrapper { height: 100vh; } . As you can see, the element still has “growth”. I also set the rules from your answer usually, as it is convenient. I just wasn't quite sure that it was professional. - Aleksandr Shemetillo
  • learn css and you will be quite sure ...) - Air

This is normal and often justified. If you refer to the specification, it says that the height property can be set for all elements except for non-replaced inline elements, table cells and column groups. <html> and <body> are block-level elements, so height can be safely set.

Visual formatting model details

'height' Applies to all elements of elements, table, and column groups