1

Есть два дива в столбик, у первого дива высота динамическая (то есть неизвестная) в зависимости от контента. Второй див должен занимать всю оставшуюся высоту минус высота первого дива. Есть ли возможность реализовать подобное без javascript и без table?

HTML

<div class="wrapper">
     <div class="title">text text text text text text text text text text text text text text</div>
     <div class="body">text</div>
</div>

CSS:

.wrapper {
   height: 90%; width: 200px;
   background: red;
   padding: 0 5px;
   position: fixed;
}
.title {
   background: blue;
}
.body {
   background: yellow;
   height: 100%;
}

JSFIDDLE

https://jsfiddle.net/jetvsg8n/

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 22 дек 2015 в 4:23

2 ответа 2

0

Вам поможет flex с ориентацией по колонкам и пропорциями 0 и 1.

.wrapper {
    height: 150px; width: 150px;
    background: red;
    padding: 0 5px;
    position: fixed;
    display: flex;
    flex-direction: column;
}
.title {
    background: blue;
    flex: 0;
}
.body {
    background: yellow;
    flex: 1;
}
<div class="wrapper">
    <div class="title">Lorem Ipsum Lorem Ipsum</div>
    <div class="body">text text text text text</div>
</div>

11
  • Спасибо за ответ, но результат какой-то странный. В вашем ответе второй (желтый блок) занял вообще всю высоту, не вычитая высоту первого дива. 20 дек 2015 в 16:10
  • @user2164613 Что значит "всю высоту"? Ну вот смотрите, обновил ответ, теперь wrapper квадратный, пропорции хорошо видно. Если это не то, то я ваш вопрос не понял.
    – Kyubey
    20 дек 2015 в 16:15
  • Блок body занял всю высоту родителя wrapper, а блока title (синего) вообще не видно на вашем примере. Не знаю как еще понятнее суть изложить: Высота блока body должна быть 100% минус высота блока title. 20 дек 2015 в 16:19
  • 1
    У меня (Версия 47.0.2526.106 m (64-bit) Вы используете самую новую версию Chrome.) на windows 10. И выглядит у меня это так: i.imgur.com/lZsuw7R.png 20 дек 2015 в 16:27
  • 1
    лишний flex: 0; у класcа title. Вообще лучше в данном случае пользоваться не алиасом flex, а конкретными свойствами: flex-grow, flex-shrink
    – Grundy
    20 дек 2015 в 16:32
0

Такой результат ожидается?

html, body  {
  height: 100vh;
  padding: 0;
  margin: 0;
}
.wrapper{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  background: #68AAAB;
  height: 100%;
  max-width: 600px;
  margin: auto;
  padding: 10px;
}
.div--top {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background: #022827
}
.div--bottom {
  -webkit-box-flex: 2;
  -webkit-flex: 2;
      -ms-flex: 2;
          flex: 2;
  background: #B5B74A
}
  <div class="wrapper">
    <div class="div--top"></div>
    <div class="div--bottom"></div>
</div>

Ваш ответ

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

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