Зависимость между блоками по высоте

258

16 июля 2017, 10:19

Есть следующая структура https://xrtc.chat/test/index.html

.main { 
  height: 100vh; 
  border: 5px solid black; 
} 
 
.header { 
  height: 30px; 
  background: red; 
} 
 
.center { 
  height: 400px; 
  background: blue; 
} 
 
.footer { 
  background: green; 
  overflow-y: scroll; 
} 
 
.footer-ins { 
  height: 1000px; 
}

<section class="main"> 
  <header class="header"></header> 
  <section class="center"></section> 
  <footer class="footer"> 
    <div class="footer-ins"></div> 
  </footer> 
</section>

Блок .main растягивается на всю высоту страницы.

.header и .center имеют фиксированную высоту.

.footer-ins может иметь любую высоту.

Подскажите пожалуйста, как сделать так, чтобы высота .footer рассчитывалась автоматически и появлялся скролл. И чтобы контент не вылазил за пределы страницы.

P.S. Можно конечно использовать FlexBox, но в оригинале в блоке center используется UI-resizable тогда он перестает изменяться по высоте.

Возможно есть некое решение через JQ для автоматического расчёта высоты исходя из динамических размеров других блоков.

Answer 1

Если UI-resizable используется именно так, то вроде бы флексбокс никак негативно не влияет на его применение.

$(function() { 
  $(".center").resizable(); 
});

body { 
  margin: 0; 
} 
 
main { 
  display: flex; 
} 
 
.main { 
  height: 100vh; 
  border: 5px solid black; 
  width: 50%; 
  display: flex; 
  flex-direction: column; 
  box-sizing: border-box; 
} 
 
.header { 
  height: 30px; 
  background: red; 
  flex-shrink: 0; 
} 
 
.center { 
  background: blue; 
  height: 50px; 
  flex-shrink: 0; 
} 
 
.footer { 
  background: green; 
  overflow-y: scroll; 
  flex-grow: 1; 
} 
 
.footer-ins { 
  height: 1000px; 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css"> 
 
 
<main> 
  <section class="main"> 
    <header class="header"></header> 
    <section class="center"></section> 
    <footer class="footer"> 
      <div class="footer-ins"></div> 
    </footer> 
  </section> 
  <section class="main"> 
    <header class="header"></header> 
    <section class="center"></section> 
    <footer class="footer"> 
      <div class="footer-ins"></div> 
    </footer> 
  </section> 
</main>

Answer 2

В CSS3 есть халява - calc()

.footer {
    height: calc(100% - 430px);
}

Проверь, должно работать

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Адаптивная верстка, CSS

Я пишу макет сайта и не могу понять как сделать так чтобы на экранах с разными разрешениями он смотрелся опрятноКогда уменьшаю окно браузера...

208

HTML

Ширина страницы

Нужно узнавать текущую ширину страницы и делать определённые действия

229

HTML

Как сделать js-ом такую анимацию меню

Как тут - https://blogprototypr

229

HTML

Обращение к тексту, введённому в поле формы

Подскажите, будьте добрыИзучаю jQuery с недавних пор, так что, если это возможно, без специфических выражений и терминов

283