0

Есть 3 вложенных блока в другой блок.

    .container {
      border: 1px solid black;
      height: 150px;
    }
    
    .top {
      height: 20px;
      border: 1px solid red;
    }
    
    .content {
      overflow: scroll;
    }
    
    .bottom {
      height: 20px;
      border: 1px solid red;
    }
<div class="container">
    <div class="top">top</div>
    <div class="content">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br></div>
    <div class="bottom">bottom</div>
 </div>

Необходимо, чтобы блок top прилип вверх родительского блока container, блок bottom прилип вниз родительского блока container, а блок content занял все оставшееся место, если содержимое этого блока не полностью помещается, то появилась полоса прокрутки.

1
  • @MaximLensky, content должен поместиться между top и bottom, если есть переполнение его размеры остаются такими же, содержимое прокручивается.
    – cassius
    5 июл 2019 в 2:20

2 ответа 2

2

.container {
  border: 1px solid black;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.top {
  border: 1px solid red;
  flex-grow: 1;
}

.content {
  overflow: auto;
  overflow-x: hidden;
  flex-grow: 3;
}

.bottom {
  flex-grow: 1;
  border: 1px solid red;
}
<div class="container">
  <div class="top">top</div>
  <div class="content">content</div>
  <div class="bottom">bottom</div>
</div>

2
  • а я себе руку сломал ..щас с гипсом сижу..одной рукой печатаю 5 июл 2019 в 2:54
  • @MaximLensky, сочувствую....
    – Air
    5 июл 2019 в 2:58
1

Воспользуемся обычной математикой 1 класса т.е

Высота родителя 150px

Высота среднего блока x

Высота верхнего и нижнего 20px

Итого: x = 150 - (20*2) = 110px

Результат в сниппете :

* {
  box-sizing: border-box;
}

.items {
  width: 250px;
  height: 150px;
}

.items__middle {
  overflow-y: auto;
  height: 110px;
  background: #fbfbfb;
  padding: 4px;
}

.items__top,
.items__bottom {
  height: 20px;
}
<div class="items">
  <div class="items__top">
    header
  </div>
  <div class="items__middle">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam suscipit unde et perspiciatis libero, commodi debitis odit reiciendis eos voluptas maiores voluptatem eius voluptate, iusto nostrum cumque necessitatibus! Possimus odio, culpa cupiditate
    ab perferendis facere dicta eveniet temporibus eos nam vero ducimus facilis ex quidem sit nisi deleniti modi nulla iste id vitae? Eius laboriosam inventore qui aut aliquam delectus. Enim velit vel eaque nobis fuga ratione illo tempora voluptatum amet
    quasi cupiditate voluptas distinctio porro ea consequatur, vitae magnam ex ullam aspernatur molestias. Incidunt enim, veniam saepe quae quidem tenetur maxime quibusdam nisi voluptas, est ullam alias assumenda quod!
  </div>
  <div class="items__bottom">
    footer
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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