When I registered everything in px, everything works and everything is ok. When I prescribe elements of divs in%, they lose their height and through the console I see that height is 0. How can I solve this problem? overflow: hedden; tried nothing changes.
If you specify a value in percent, then from what, from what value is this percentage itself? Or specify in the parent block height: 100%; or
body, html { height: 100%; } In general, as Elena correctly said, the height of the block is either clearly indicated in pixels, or depends on the content.
To demonstrate the code, they write it here, or use online editors:
and do not attach a screen code.
Percentages are used when there is a relative to what, relative to an external unit. However, this does not always work. Basically, the block height depends on the content, unless explicitly specified in px.
From the CSS 2.1 specification clause 10.5. :
If the height of the outdoor unit is calculated by its content, then the height in% does not work, and is replaced by height: auto. Except for the case when the element has position: absolute.
EXAMPLE:
/* Внешним блокам задана высота */ body, html { height: 100%; } nav { width: 100%; height: 11%; background: #fefefe; position: fixed; top: 0; left: 0; } .hero { height: 80%; background: #ccc; } .product { height: 10%; background: #a33; } .footer { height: 10%; background: #030; } <nav></nav> <div class="hero"></div> <div class="product"></div> <div class="footer"></div> 
Source: https://ru.stackoverflow.com/questions/565904/
All Articles