Как я могу назначить высоту для элемента, чтобы высота равнялась высоте экрана? - PullRequest
Новая
       3

Как я могу назначить высоту для элемента, чтобы высота равнялась высоте экрана?

1 голос
/ 27 февраля 2020

У меня есть <section>, в котором есть некоторый контент. 

<section class="Header">
    <h1 class="mainHeader">Lorem ipsum dolor sit amet con</h1>
    <h3 class="subHeader">obcaecati laboriosam iste ad exercitationem culpa aspernatur, molestias</h3>
</section>

Я дал CSS всем subclasses из Header. Просто чтобы они выглядели хорошо. Header должна быть высота экрана. Потому что в каждом окне просмотра размер шрифта всего subclasses будет меняться.

На данный момент я дал subHeader margin-bottom, чтобы сделать Header из screen size. Но это неправильная практика, потому что мне нужно менять margin-bottom из subHeader каждый раз и для каждого viewport. Плюс ко многим screen sizes, он может быть короче или длиннее, чем screen.

Когда я назначаю media query, чтобы сделать сайт отзывчивым. Для экранов меньшего размера, например: (max-width: 768px), я уменьшил size text, и header сместился вверх, но я хочу, чтобы он всегда был height устройства, а не измените его height, даже если font-size увеличено или уменьшено.

Я искал в Интернете и получил несколько решений:

Первый: Использование height: 100vh;

Второй: По Javascript (код ниже) 

var vHeight = $(window).height(),
  header= $('.Header');

header.css({
  "height": vHeight
});

Но оба они не работают на экранах меньшего размера. Высота Header больше размера экрана.

Заключение:

Основной вопрос: Как я могу назначить высоту для элемента, чтобы высота равнялась высоте экрана (которая используется во время просмотра веб-сайта)?

Кто-нибудь знает, как это сделать?

Ответы [ 2 ]

1 голос
/ 27 февраля 2020

Чтобы получить высоту экрана, вы можете использовать объект Window.screen , где вам доступно несколько свойств, таких как screen.height и screen.width.

Например, это даст вам высоту экрана в переменной: 

let screenHeight = window.screen.height;

Теперь вы можете использовать эту высоту для динамического / программного изменения того, что вам нужно, с точной высотой экрана. Например, установка высоты элемента: 

let yourElement = document.getElementById('elementsId');
yourElement.style.height = screenHeight;

edit

Вы также можете попытаться получить высоту порта просмотра с помощью window.innerHeight потому что он основан на ширине области просмотра: 

let viewHeight = window.innerHeight;

, что должно лучше воспроизводиться с вашими медиа-запросами, хотя вам может потребоваться настроить несколько пикселей.

Будьте осторожны при использовании жестко запрограммированных значений ширины и высоты. Они могут отлично смотреться на одном экране, но разбить все остальные. Попробуйте придерживаться размеров в процентах и ​​использовать такие вещи, как коробочная модель и flexbox для макетов, когда отзывчивость вызывает беспокойство.

0 голосов
/ 27 февраля 2020

Вам это не подходит? 

html,
body {
  margin: 0;
  padding: 0;
}

.Header {
  height: 100vh;
  overflow: hidden;
  background-color: yellow; /* Just to show the area */
}
<section class="Header">
  <h1 class="mainHeader">Lorem ipsum dolor sit amet con</h1>
  <h3 class="subHeader">obcaecati laboriosam iste ad exercitationem culpa aspernatur, molestias</h3>
</section>
<p>This content is after the header</p>
...