1

Есть блок header и slider, как сделать, чтобы slider был определенной высоты (например, 80% экрана), а внизу оставалась еще section? Установить высоту не получается в %, только в 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/

4
  • А section должен занимать всё остальное пространство? 3 дек 2016 в 9:45
  • @VadimOvchinnikov, Нет, лишь 70% внизу slider 3 дек 2016 в 10:03
  • Сейчас дополню. Так что section снизу уже не надо? 3 дек 2016 в 10:08
  • @VadimOvchinnikov нужен, пытаюсь его разместить внизу slider по центру, добавил postion: absolute; margin: auto, но section остается внизу, но слева 3 дек 2016 в 10:20

1 ответ 1

1

Для установки размеров относительно экрана используйте единицы измерения vh что означает viewport height.

#slider {
  height: 80vh;
}

Полный пример (стили по умолчанию или нерелеватные опущены).

#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>

7
  • только не width, а height. для width - 80vw 3 дек 2016 в 9:56
  • Спасибо за внимательность, видимо, вредно пытаться одновременно работать и отвечать на SO. 3 дек 2016 в 9:57
  • Ну и с поддержкой в IE могут быть проблемы. Если верить caniuse.com/#search=vh только 11-я версия частично поддерживает эти единицы измерения 3 дек 2016 в 10:08
  • @VadimOvchinnikov, спасибо! 3 дек 2016 в 10:10
  • @humster_spb поддержка IE9+ существует, просто посмотрите на другие вкладки там же, к примеру "Usage relative". 3 дек 2016 в 10:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.