1

Есть следующая структура 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 для автоматического расчёта высоты исходя из динамических размеров других блоков.

2
  • "появлялся скролл" - у какого элемента должен появляться скролл?
    – Cheg
    14 июл 2017 в 11:20
  • Если UI-resizable является узким местом и именно из-за него вы не можете использовать флексбокс, то опишите более детально как он интегрирован в вашу структуру, без этого любой из ответов вам может помочь лишь случайно. 14 июл 2017 в 11:33

2 ответа 2

0

Если 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>

1
  • Подскажите, а если нужно чтобы скролл появлялся не для "footer" а для "footer-ins". Т.е. при вот такой структуре <section class="main"> <header class="header"></header> <section class="center"></section> <footer class="footer"> <div class="footer-ins"><div class="footer-content"></div></div> </footer> </section> .footer-ins { height:auto; } .footer-content{ height:1000px; } 14 июл 2017 в 18:32
0

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

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

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

1
  • К сожалению в оригинале не сработает, т.к. "center" изменяемая часть и она может быть любого размера. Если можно было бы как то так задать height: calc(100% - динамическая высота блока); 14 июл 2017 в 11:12

Ваш ответ

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

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