Растянуть блок на всю высоту экрана

479

26 июня 2017, 18:00

Не могу понять, блок внутри body не растягивается на всю высоту экрана, пробовал min-height: 100% / 100vh

Результата нету, пожалуйста объясните почему это не срабатывает, и как можно растянуть?

Answer 1

Итак, если конструктивно ваш сайдбар более ничем не дополняется, а единственный элемент, который необходимо прижать к нижней части экрана - это лого, то вот вам наиболее простое решение. Рассмотрим все по порядку:

Первым делом, оборачиваем оба контейнера в какой-нить тег, так как они имеют float: left, от которого нам необходимо избавится из-за проблем с абсолютным позиционированием элементов. Для этого используем класс .clear, .clr и им подобные, в примере я просто задал следующие стили:

main:after {
 content: '';
 display: table;
 clear: both;
}

Далее, меняем цвета у body и блока с контентом, чтоб сайдбар не имел заднего фона. Выносим из него .copyright. Туда же добавляем абсолютную позицию и добавляем нижний отступ у .left-bar на высоту логотипа. Что-то вроде этого:

.left-bar {
  min-height: 100vh;
  display: inline-block;
  padding-bottom: 110px;
}
.copyright {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 200px;
  max-width: 100%;
  height: 80px;
  background-image: url("http://i.imgur.com/1QBd5b5.png");
  background-repeat: no-repeat;
  background-position: center;
}

Почему мы вынесли его за пределы сайдбара? Для того, чтоб на мобильных устройствах мы могли потом переместить его в конец страницы (в примере я этого не делал, так как задача не стояла).

И сам результат:

* { 
  margin: 0; 
  padding: 0; 
} 
html { 
  height: 100%; 
} 
body { 
  position: relative; 
  background-color: #0e1416; 
  font-size: 12px; 
  font-family: 'Roboto', sans-serif; 
  height: 100%; 
} 
main { 
  position: relative; 
  background-color: #0e1416; 
} 
main:after { 
  content: ''; 
 display: table; 
 clear: both; 
} 
/* Left bar */ 
.left-bar { 
  min-height: 100vh; 
  display: inline-block; 
  padding-bottom: 110px; 
} 
.logotype { 
  background-image: url('http://i.imgur.com/Tbqbu8K.png'); 
  background-repeat: no-repeat; 
  background-position: center; 
  height: 100px; 
} 
.button-fl { 
  width: 210px; 
  height: 110px; 
  text-align: center; 
  vertical-align: middle; 
  margin-top: 7px; 
} 
 
.left-bar button { 
  width: 165px; 
  height: 35px; 
  margin-top: 10px; 
  border-radius: 4px; 
  background-color: #131b1e; 
  border: none; 
  color: #fff; 
} 
.left-bar button:hover { 
  background-color: #2b99c5; 
  transition: 1s; 
} 
.cats { 
  margin-top: 10px; 
  vertical-align: middle; 
  text-align: center; 
} 
.cats a { 
  display: block; 
  height: 35px; 
  color: #5e7279; 
  text-decoration: none; 
} 
.cats a:hover { 
  color: #fff; 
  transition: 0.5s ease; 
} 
.left-bar ul { 
  display: inline-block; 
  text-align: left; 
  list-style-image: url("http://i.imgur.com/3p7hKZ7.png"); 
} 
.left-bar ul > li { 
  padding-left: 10px; 
  list-style-type: none; 
} 
.left-bar ul > li:hover { 
  list-style-image: url("http://i.imgur.com/eElkjFO.png"); 
  transition: 0.5s; 
} 
 
.active-cat-left { 
  list-style-image: url("http://i.imgur.com/eElkjFO.png"); 
  color: #fff; 
} 
.active-cat-left a { 
  color: #fff; 
} 
.copyright { 
  position: absolute; 
  left: 10px; 
  bottom: 10px; 
  margin-bottom: 0; 
  width: 200px; 
  max-width: 100%; 
  height: 80px; 
  background-image: url("http://i.imgur.com/1QBd5b5.png"); 
  background-repeat: no-repeat; 
  background-position: center; 
} 
/* ------------ */ 
 
.content-part { 
  float: right; 
  color: #fff; 
  background-color: #0b1012; 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
<html> 
 
<head> 
  <title>For example</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
 
<body> 
  <main> 
    <div class="left-bar col-md-2"> 
      <a href="/"> 
        <div class="logotype"></div> 
      </a> 
      <div class="button-fl"> 
        <button class="sign-in">Войти</button> 
        <button class="sign-up">Регистрация</button> 
      </div> 
      <div class="cats"> 
        <ul> 
          <li><a href="/">Боевики</a></li> 
          <li class="active-cat-left"><a href="/">Комедии</a></li> 
          <li><a href="/">Фантастика</a></li> 
          <li><a href="/">Драмы</a></li> 
          <li><a href="/">Ужасы</a></li> 
          <li class="active-cat-left"><a href="/">Приключения</a></li> 
          <li><a href="/">Документальные</a></li> 
          <li><a href="/">Семейные</a></li> 
          <li class="active-cat-left"><a href="/">Военные</a></li> 
          <li><a href="/">Криминал</a></li> 
        </ul> 
      </div> 
    </div> 
 
    <div class="content-part col-md-10"> 
      <div class="row no-gutter">text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text text text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text text text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text text text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext 
        text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text 
        texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text 
      </div> 
    </div> 
    <a href="http://ensistudio.com" alt="Только лучшее качество!"> 
      <div class="copyright"></div> 
    </a> 
  </main> 
</body> 
 
</html>

Answer 2

html, body { width: 100%; height: 100%; }

Answer 3

100% не правильно, нужно задавать min-height: 100vh но для корректной работе нужно в head

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 4

Поправил ваш код. И все же не понятно почему вы не пользуетесь flex.

body {
  display: table;
  width: 100%;
}
.left-bar, .content-part {
  display: table-cell;
}

Создание сайта для строительной компании в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Display Block По времени

Привет всем

383

HTML

Как загрузить html файл из сети в приложение, чтоб потом смотреть его оффлайн?

446

HTML

Проблема кодировки в apache cordova

Делаю

446

HTML

Превращение ссылки в кнопку

Возможно ли при помощи JQuery заставить <a> выполнять действие <input type="submit">? Если "да", то как и какие методы использовать?

280