@krll-k

Как задать высоту блоку равной высоте видимой части экрана в браузере? Почему если написать body {height: 100%} ничего не происходит?

Всем привет, возник трудность с верстанием:
login.png
Что конкретно?
57e394f076064d619ab00444580fcf87.png
Не могу задать высоту контейнеру в 80% от оставшейся высоты видимой части экрана браузера:
* {
  margin: 0;
  padding: 0;
}

body {
  background: #42668C;
  color: white;
  font-family: Arial, sans-serif;  
}
a {
  color: white;
  text-decoration: none;
}
input[type=button] {
  background: #42668C;
  color: white;
  border: none;
  cursor: pointer;
}

.container {
  height: ??? /*600*/
}

Если высота моего дисплея 768px, то видимая часть с вычетом траты на меню пуск и вкладки - всего ~600px
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="logo"></div>
    <div class="welcome">Добро подаловать!</div>
    <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae rem optio, ut, dignissimos voluptatibus minus dicta quam tempore temporibus. Ex ullam, sapiente esse quibusdam sequi ad provident ipsa repudiandae quas.</div>
    <form action="/">
      <input placeholder="Телефон или email" type="text">
      <input placeholder="Пароль" type="text">
      <input id="" type="checkbox"><label for="">Чужой компьютер</label>
      <input type="button" value="Войти">
      <input type="button" value="Регистрация">
    </form>
    <a href="#">Забыли пароль?</a>
  </div>
</body>
</html>


Чего я хочу избежать? Мне не нужна вертикально появляющейся прокрутка!
Почему она появляется или должна появится? Когда я дописываю свойство background liner-gradient(на макете явно он есть), то вот что у меня получается, тырк

Как быть? Почему если написать body {height: 100%} ничего не происходит? Я ожидаю увидеть что height станет высотой оставшейся видимой части экрана браузера
  • Вопрос задан
  • 12238 просмотров
Решения вопроса 1
@krll-k Автор вопроса
CSS3 - для новых(IE8+) браузеров
Для современных браузеров подойдёт решение с CSS3 единицами 'vh'. Для старых браузеров придётся использовать CSS2 или задействовать javascript
body {
  height: 100vh;
}
В любом случаи необходимо смотреть поддержку

CSS2 - для всех старых браузеров
Корневой элемент html на самом деле не самый верхней уровень на странице — им является «viewport». Для простоты, будем считать, что это окно браузера. Так вот, если установить height: 100% элементу html, то это то же самое, что сказать — стань такой же высоты, как окно браузера
html, body, .container {
    height: 100%;
}
Если не задать html {height: 100% }, то body {height:100%} не имеет смысла

JavaScript(Jquery) - для старых браузеров и в самом крайнем случаи
function setHeiHeight() {
    $('#hei').css({
        height: $(window).height() + 'px'
    });
}
setHeiHeight(); // устанавливаем высоту окна при первой загрузке страницы
$(window).resize( setHeiHeight ); // обновляем при изменении размеров окна
Думаю что Коментарии тут не требуются
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
eucalipt
@eucalipt
Самоделкин.
Ничего не происходит при height: 100% потому, что 100% берется от содержимого этого блока. Специально для таких случаев как у Вас ввели единицы измерения vh.
Попробуйте
height: 100vh;
Ответ написан
Комментировать
xakplant
@xakplant
Автор сайта xakplant.ru
Можно попробовать через билиотеку https://xakplant.ru/stickjaw/
Например через метод loop
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы