Как установить высоту элемента относительно размера экрана

Question

Я хочу установить height элемента в процентах от размеров полноэкранного режима, чтобы при уменьшении размера окна браузера высота не изменялась.

Answer 1

Вы можете указать height в vh, что соответствует 1% высоты начального содержащего блока области просмотра *1005* (не экрана).

Если вам действительно нужно, чтобы height относился к высоте экрана, вам нужно будет использовать JavaScript s screen object:

window.screen.height;
window.screen.width;

Вы можете использовать эти значения непосредственно в атрибуте style:

// 10% of the screen height:
document.getElementById('container')
  .style.height = `${ window.screen.height * 0.1 }px`;

#container {
  width: 100%;
  border-bottom: 3px solid black;
  
  /* Fallback value (relative to viewport, not screen) */
  height: 10vh;
}

<div id="container"></div>

Или создайте что-нибудь более повторно используемое, используя calc() и CSS пользовательские свойства :

document.documentElement.style.setProperty(
  '--container-height', `${ window.screen.height }px`);
  
document.documentElement.style.setProperty(
  '--container-width', `${ window.screen.width }px`);

:root {
  /* We use thew viewport's dimensions as fallback values: */
  --screen-height: 100vh; 
  --screen-width: 100vw; 
}

#container {
  width: 100%;
  border-bottom: 3px solid black;
  
  /* 10% of the screen height: */
  height: calc(0.1 * var(--container-height));
}

<div id="container"></div>

Answer 2

оператор % является динамическим c, он изменяется в зависимости от ширины или высоты экрана, поэтому, если вы хотите, чтобы длина не изменялась, вы можете использовать px или pt или даже rem ( но это зависит от root размера элементов)