1

Здравствуйте возникла проблема с задание 100% адаптивной высоты между блоками, к примеру:

html,
body {
  height: 100%;
}

.wrapper {
  height: 100%;
  position: relative;
}

header {
  height: 100px;
}

section {
/*нужно чтобы этот блок занял все пространство между шапкой и футером*/
  height: ;
}

footery {
  height: 100px;
  position: absolute;
  left: 0;
  bottom: 0;
}
<div class="wrapper">
  <header>header
  </header>
  <section>section
  </section>
  <footer>footer
  </footer>
</div>

Надеюсь кто-нибудь подскажет как это можно реализовать...

4 ответа 4

3

Попробуйте решить с помощью Flexbox:

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

.wrapper{
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
}

header{
    height: 30px;
    background: red;
}

section{
     background: #ccc;
     flex-grow:1;
}

footer {
    height: 30px;
     background: green;

}
<div class="wrapper">
            <header>
            </header> 
            <section>
    
            </section>
            <footer>
            </footer>
        </div>

При этом высота шапки и подвала может быть динамической, а не фиксированной

2

html,
body {
  height: 100%;
}

.wrapper {
  height: 100%;
  position: relative;
}

header {
  height: 100px;
  background: silver;
}

section {
  height: calc(100vh - 200px);
  background: antiquewhite;
}

footer {
  height: 100px;
  background: silver;
}
<div class="wrapper">
  <header>header</header>
  <section>section</section>
  <footer>footer</footer>
</div>

2
  • 1
    Понятия не имею, зачем ты футеру прописал absolute. Без него было бы гораздо лучше.
    – Qwertiy
    6 апр 2018 в 20:44
  • Действительно. Не заметил это. Просто скопировал код из вопроса и поправил место, в котором был вопрос у человека. Прошу прощения.
    – DeCentu
    7 апр 2018 в 9:30
1

Можно через переменные css3 с использованием viewport

:root{
  --height1:10vw;
  --height2:10vw;
}
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html,body{
  height:100%;
}
.wrapper {
  height: 100%;
  position: relative;
}

header {
  height:var(--height1);
}

section {
  background:lightgreen;
  height:calc(100% - (var(--height1) + var(--height2)) );
}

footer {
  height: var(--height2);
}
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<div class="wrapper">
  <header>header</header>
  <section>section </section>
  <footer>footer </footer>
</div>

4
  • Неправильно же.
    – Qwertiy
    6 апр 2018 в 20:45
  • @Qwertiy исправил , вроде бы так ?
    – user33274
    6 апр 2018 в 21:04
  • Да, так можно. Только непонятно, если у тебя всё равно vh, то зачем их вычитать из процентов? Или зачем про них в ответе говорится.
    – Qwertiy
    6 апр 2018 в 22:31
  • по ошибке написал
    – user33274
    7 апр 2018 в 4:27
-2

Я так понял вам надо сделать, что бы и верхняя часть и нижняя были поверх section

section{
    height: 100vh
}
footer, header {
    z-index: 1
}
1
  • Ну неверно же... Хотя.. Возможно, но в таком случае ответ нужно дописать (про паддинги).
    – Qwertiy
    6 апр 2018 в 22:31

Ваш ответ

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

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