Высота 100% внутри гибкого элемента - PullRequest
Новая
       8

Высота 100% внутри гибкого элемента

0 голосов
/ 25 июня 2019

У меня есть макет, который в основном разделен на 3 части, а средняя должна занимать полную высоту.И это так.

Однако мне нужен дополнительный div, который будет играть роль фона, и здесь возникает проблема.Ребенок не хочет брать 100% роста.

Здесь .body - это div, который растягивается, когда не хватает контента, и .bg-gray - это тот, который я хочу взять у своего родителя во весь рост..

Есть ли способ достичь этого без , используя относительное + абсолютное позиционирование?

Кроме того, я ищу ответ на мой вопрос: почему это происходит так, чтопуть. 

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

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.header {
  height: 50px;
  background-color: #e6e6e6;
}

.footer {
  height: 50px;
  background-color: #aaa444;
}

.body {
  flex: 1;
}

.bg-gray {
  background-color: #eee;
  min-height: 100%;
  flex: 1;
}
<div class="container">
  
  <div class="header">
 
  </div>
  
  <div class="body">

    <div class="bg-gray">
      <div>
        asdasd
      </div>
    </div>
    
  </div>
  
  
  <div class="footer">
 
  </div>
  
</div>

1 Ответ

0 голосов
/ 25 июня 2019

Применить flexbox к .body div. 

.body {
  flex: 1;
  display: flex;
  flex-direction: column;
}


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

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.header {
  height: 50px;
  background-color: #e6e6e6;
}

.footer {
  height: 50px;
  background-color: #aaa444;
}

.body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.bg-gray {
  background-color: darkgrey;
  min-height: 100%;
  flex: 1;
}

.bg-gray div {
  background: lightblue;
}
<div class="container">

  <div class="header">

  </div>

  <div class="body">

    <div class="bg-gray">
      <div>
        asdasd
      </div>
    </div>

  </div>


  <div class="footer">

  </div>

</div>
...