Исключить высоту существующего div при настройке высоты области просмотра для другого div - PullRequest
Новая
       23

Исключить высоту существующего div при настройке высоты области просмотра для другого div

0 голосов
/ 03 октября 2018

Я работаю над страницей, которая имеет заголовок nav, затем две строки изображений баннеров, затем еще пару делений под баннерами.

Чего я хотел бы добиться, так это иметь navdiv - установленная высота (90 пикселей), а затем два ряда баннеров равномерно разделят оставшуюся высоту области просмотра браузера пользователя.Затем сделайте так, чтобы два элемента ниже баннеров также имели фиксированную высоту пикселей.

Вот фрагмент моего урезанного кода: 

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

.nav {
  background: red;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banners-row-1 {
  background: green;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
}

.banners-row-2 {
  background: orange;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
}

.mailing-list {
  height: 115px;
  background: pink;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer {
  height: 117px;
  background: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="nav">
  This is the nav
</div>
<div class="banners-row-1">
  Banners Row 1
</div>
<div class="banners-row-2">
  Banners Row 2
</div>
<div class="mailing-list">
  Mailing List
</div>
<div class="footer">
  Footer
</div>

Как вы можете видеть, две строки баннера установлены на 50vh, что близко к тому, что я хочу, но есть ли способ как-то включить90px nav div, когда баннер div вычисляет высоту области просмотра?

По сути, я хочу получить что-то вроде 50% 'высоты области просмотра минус 90px' ...?

Спасибо

1 Ответ

0 голосов
/ 03 октября 2018

Оберните вашу навигацию и баннеры в оболочку и используйте следующие свойства flex: 

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

.nav {
  background: red;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrap {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.ban {
  flex: 1;
}
.banners-row-1 {
  background: green;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banners-row-2 {
  background: orange;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mailing-list {
  height: 115px;
  background: pink;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer {
  height: 117px;
  background: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="wrap">
  <div class="nav">
    This is the nav
  </div>
  <div class=" ban banners-row-1">
    Banners Row 1
  </div>
  <div class="ban banners-row-2">
    Banners Row 2
  </div>
</div>
<div class="mailing-list">
  Mailing List
</div>
<div class="footer">
  Footer
</div>

Это работает, потому что пространство в .wrap разделено следующим образом: .nav исправил 90px. Баны имеют одинаковое левое пространство (100vh - 90px) / 2

...