主页 / 问题 / 1490913
Accepted
Oliver Patterson
Asked:2023-01-29 07:59:20 +0000 UTC2023-01-29 07:59:20 +0000 UTC

带有项目的边界框内的可滚动框

  • 772

我将尝试更好地解释我想用文字开始的内容。

我们有一个块，假设它height: 150px是，它里面可能有（嗯，更准确地说，会有）几个未知高度的块和一个应该占据剩余空间并具有滚动功能的块。

代码很可能会更具描述性，我遇到过：

body { margin: 15px; }

.block
{
  height: 150px;
  width: 500px;
  
  padding: 5px;
  
  border: 1px solid #000;
}

.block div:not(:last-child)
{
  margin-bottom: 10px;
}

.block-overflow
{
  border: 1px solid #DC4242;
  overflow-y: auto;
  
  height: 100%;
}
<div class="block">
  <div>Test</div>
  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    Sint, blanditiis corrupti perferendis nobis tempora
  </div>
  
  <div class="block-overflow">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non, dolores! Ratione facilis nam sint delectus laudantium. Delectus itaque esse quaerat voluptatibus provident reiciendis mollitia enim, tenetur vitae inventore aliquam exercitationem ut ratione dignissimos. Molestias saepe eum vitae quisquam iste excepturi cum et ipsa incidunt. Eum facere dolorum aspernatur perferendis voluptates, unde alias officiis quas illo blanditiis. In, repudiandae beatae. Deleniti nihil eos delectus soluta unde consequatur maiores mollitia expedita accusantium aperiam nam quas omnis id optio a error vitae iusto natus consequuntur, quos voluptate modi. Magni expedita natus suscipit non veritatis amet, quo accusantium tenetur odio eveniet blanditiis officia corrupti!
  </div>
<div>

帮我解决一个困扰我很久的问题。

谢谢你的时间。

html

1 个回答

  1. Best Answer

    你可以这样做。这应该可以省去你的麻烦：

    body {
  margin: 15px;
}

.block {
  /*Предписываем блоку стать контейнером сетки. Сетка
  это вертикальные линии пересекающие горизонтальные линии (grid line)
  и образующие клетки сетки (grid cell). В которых можно
  размещать элементы сетки (grid items).*/
  display: grid;
  /*Автоматически будет создано две вертикальные линии образующие
  столбец на всю ширину контейнера (grid track). Команда `grid-template-rows`
  создает вертикальные линии которые образуют строки (grid tracks).
  Команда `repeat` будет в цикле создавать заданное
  количество строк. `auto-fit`при помощи "хитрых"
  математических формул заставит `repeat` создать столько
  строк сколько поместится в контейнере
  и распределит элементы сетки (grid items) по ячейкам сетки (grid cell)
  автоматически.
  Остальные строки (grid tracks) кому не достанется элементов схлопнуться.
  В нашем случае мы имеем три элемента два из которых
  имеют определенную высоту, а третий резиновый (его контент может сжиматься).
  Так как элементы сетки не могут выходить за пределы сетки контейнер
  будет поделен на три фракции по одной фракции на элемент (1fr).
  Первый и второй элемент поместятся на всю свою высоту, а третий будет
  ужат до размера оставшегося после размещения первых двух элементов.*/
  grid-template-rows: repeat(auto-fit, 1fr);
  height: 150px;
  width: 500px;
  padding: 5px;
  border: 1px solid #000;
  overflow: none;
}

.block div:not(:last-child) {
  margin-bottom: 10px;
}

.block-overflow {
  border: 1px solid #DC4242;
  overflow-y: auto;
}
    <div class="block">
  <div>Test</div>
  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, blanditiis corrupti perferendis nobis tempora
  </div>

  <div class="block-overflow">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non, dolores! Ratione facilis nam sint delectus laudantium. Delectus itaque esse quaerat voluptatibus provident reiciendis mollitia enim, tenetur vitae inventore aliquam exercitationem ut ratione
    dignissimos. Molestias saepe eum vitae quisquam iste excepturi cum et ipsa incidunt. Eum facere dolorum aspernatur perferendis voluptates, unde alias officiis quas illo blanditiis. In, repudiandae beatae. Deleniti nihil eos delectus soluta unde consequatur
    maiores mollitia expedita accusantium aperiam nam quas omnis id optio a error vitae iusto natus consequuntur, quos voluptate modi. Magni expedita natus suscipit non veritatis amet, quo accusantium tenetur odio eveniet blanditiis officia corrupti!
  </div>
  <div>

    • 2

相关问题