Как заставить элемент заполнить оставшуюся высоту области просмотра? - PullRequest
Новая
       14

Как заставить элемент заполнить оставшуюся высоту области просмотра?

0 голосов
/ 26 апреля 2018

Я бы хотел использовать CSS Grid. Как-то так я думаю… 

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto [whatever's left of the vh] auto auto;
  position: relative;
}

enter image description here

Ответы [ 3 ]

0 голосов
/ 26 апреля 2018

Вы можете сделать это, используя flex. 

.a {
  width: 100%;
  height: auto;
}

.remaining {
  width: 100%;
  flex-grow: 1;
}

.holder {
  display: flex;
  flex-direction: column;
  height: 100%;
}

html,
body {
  height: 100%;
}

HTML код: 

<div class="holder">
  <div class="a">
   Content here
  </div>
  <div class="a">
    Content here
  </div>
  <div class="remaining">
    Content here
  </div>
</div>
0 голосов
/ 26 апреля 2018

Используя CSS Grid, вам нужно обернуть два верхних элемента и оставшееся пространство, а затем применить display: grid к этому.

Другими словами, ваша диаграмма действительно была решением.

Обертка должна иметь высоту 100vh… 

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: pink;
  display: grid;
  grid-template-rows: 100vh auto auto;
  position: relative;
}

.wrapper {
  display: grid;
  grid-template-rows: auto auto 1fr;
}

header {
  background: green;
  padding: .25em;
}

nav {
  background: orangered;
  padding: .25em;
}

main {
  background: rebeccapurple;
}

footer {
  background: yellow;
}

.subfooter {
  background: blue;
}
<div class="wrapper">
  <header>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione magnam placeat quia iusto, quisquam cum temporibus modi, ex dolorem velit fuga! Minima, ex.
  </header>

  <nav>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit.
  </nav>
  <main></main>
</div>
<footer>Lorem, ipsum.</footer>
<div class="subfooter">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex dignissimos ratione maxime officia eum. ea!
</div>
0 голосов
/ 26 апреля 2018

Установите область просмотра с помощью display: flex и height: 100vh и добавьте к последнему элементу flex-grow: 1

Вот небольшая скрипка:

https://jsfiddle.net/omA123/y4j9nhpy/

...