There is a header and slider block, how to make the slider have a certain height (for example, 80% of the screen), and there is still section below? Set the height does not work in%, only in px.

 #header { padding: 1%; position: relative; display: block; width: 100%; background-color: #7fb311; color: #fff; height: auto; } #slider { position: relative; margin: 0; height: 100%; width: 100%; background: url("https://static.pexels.com/photos/2946/dawn-nature-sunset-trees.jpg") center; background-size: 100%; } #slider .section { margin: 0 auto; width: 70%; background-color: #7fb311; color: #fff; } 
 <div id="header"> HEADER </div> <div id="slider"> <div class="section"> AAA BBB CCC </div> </div>

https://jsfiddle.net/aqsrgd1t/

  • Should a section occupy the rest of the space? - Vadim Ovchinnikov
  • @VadimOvchinnikov, No, only 70% down slider - user7103883
  • Now I will add. So the section below is no longer necessary? - Vadim Ovchinnikov
  • @VadimOvchinnikov needed, trying to place it at the bottom of the slider in the center, added postion: absolute; margin: auto postion: absolute; margin: auto , but the section remains at the bottom, but on the left is user7103883

1 answer 1

To set the dimensions relative to the screen, use the units of measurement vh which means viewport height.

 #slider { height: 80vh; }

Full example (default or irrelevant styles omitted).

 #header { background-color: #7fb311; color: #fff; } #slider { height: 80vh; background: url("https://static.pexels.com/photos/2946/dawn-nature-sunset-trees.jpg") center; background-size: 100%; display: flex; align-items: flex-end; justify-content: center; } #slider .section { width: 70%; background-color: #7fb311; color: #fff; } 
 <div id="header"> HEADER </div> <div id="slider"> <div class="section"> AAA BBB CCC </div> </div>

  • only not width, but height. for width - 80vw - humster_spb
  • Thank you for your attentiveness, it seems harmful to try to work and respond to SO at the same time. - Vadim Ovchinnikov
  • Well, with the support in IE may be a problem. According to caniuse.com/#search=vh, only the 11th version partially supports these units of measure - humster_spb
  • @VadimOvchinnikov, thanks! - user7103883
  • @humster_spb IE9 + support exists, just look at the other tabs in the same place, for example "Usage relative". - Vadim Ovchinnikov