有没有办法缩小具有设定高度的元素？

Question

所以我真的不知道该问什么问题，但请听我说完。我试图制作一个 div 包装纸（它在图片中有一个浓汤背景），它可以像这样工作：

One list overflowing

Both lists overflowing

现在，上面的布局使用固定高度 divide 使用网格的包装器。所以如果我删除一些项目 this 就是我得到的。

有没有办法将 wrapper 缩小到它的内容，即使它具有固定的高度？或者是否可以在不设置高度的情况下存档相同的结果？

此外，这是使用最大高度的样子：One list overflowing

只需 few items on the list，它就完全符合我的要求。但如果溢出，我需要它来显示滚动条。所以我正在寻找两者的结合。

对于那些想知道我为什么使用网格的人。 Flex 有同样的问题加上一些 unwanted space distribution.

.wrapper {
  display: grid;
  grid-template-rows: repeat(max-content, 4);
  align-content: flex-start;
  margin: 0 auto;
  width: 80vh;
  height: 80vh;
  background-color: bisque;
  padding: 10px;
}

.header {
  background-color: darkcyan;
  padding: 10px;
  margin: 10px 0;
}

.list {
  background-color: coral;
  padding: 10px;
  overflow-y: auto;
}

.item {
  background-color: darkolivegreen;
  color: white;
  border: 1px solid gray;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="wrapper">
    <div class="header"></div>
    <div class="list">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
    <div class="header"></div>
    <div class="list">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </div>
</body>

</html>

Answer 1

您需要使用最大高度和网格自动行来代替高度和网格模板行：

可能的例子

注意： 使每个列表的高度均匀（更接近您的要求），javascript可能需要重置行高在某些时候。

.wrapper {
  display: grid;
   /* new / update */grid-auto-rows: auto minmax(auto,1fr);/* makes a repeating pattern of 2 rows */
  align-content: flex-start;
  margin: 0 auto;
  width: 80vh;
   /* new / update*/max-height: 80vh;
  overflow:hidden;
  background-color: bisque;
  padding: 10px;
}

.header {
  background-color: darkcyan;
  padding: 10px;
  margin: 10px 0;
}

.list {
  background-color: coral;
  padding: 10px;
  overflow-y: auto;
}

.item {
  background-color: darkolivegreen;
  color: white;
  border: 1px solid gray;
}

<div class="wrapper">
    <div class="header"></div>
    <div class="list">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
    <div class="header"></div>
    <div class="list">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </div>

// js 的可能示例

let grid = document.querySelector('.wrapper');
let gridRows = document.querySelectorAll('.wrapper > .list');
let rowTpl = '';

for (let i = 0; i < gridRows.length; i++) {
  let rowH = gridRows[i].offsetHeight;
  rowTpl += (" auto  minmax(auto," + rowH + "fr ) ");
  grid.setAttribute("style", "--rowTpl:" + rowTpl)
}

body {
  margin: 0;
}

.wrapper {
  display: grid;
  align-content: flex-start;
  margin: 0 auto;
  grid-template-rows: var(--rowTpl);
  width: 80vh;
  /* new / update*/
  max-height: 90vh;
  overflow: hidden;
  background-color: bisque;
  padding: 5px;
}

.header {
  background-color: darkcyan;
  padding: 10px;
  margin: 5px 0;
}

.list {
  background-color: coral;
  padding: 5px;
  overflow-y: auto;
}

.item {
  background-color: darkolivegreen;
  color: white;
  border: 1px solid gray;
}

<div class="wrapper">
  <div class="header"></div>
  <div class="list">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <div class="header"></div>
  <div class="list">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</div>

Answer 2

这就是我使用 js 想到的。我从一开始就不打算使用它。不过既然唯一的建议用了我也决定试试

虽然需要在js中设置元素的最大高度和padding之和，但还是挺灵活的

function pxToVH(px, padding = 0) {
    return (px - padding) * (100 / document.documentElement.clientHeight);
 }

 const wrapper = document.querySelector('.wrapper');
 // If wrappers height is more than 80vh set the height to 80vh else set the height to auto
 wrapper.style.height = pxToVH(wrapper.scrollHeight, 20) > 80 ? '80vh' : 'auto';

.wrapper {
  display: grid;
  grid-template-rows: repeat(auto, 4);
  row-gap: 10px;

  background-color: bisque;

  width: 80vh;
  margin: 0 auto;
  padding: 10px;
}

.header {
  background-color: darkcyan;
  padding: 10px;
}

.list {
  background-color: coral;
  padding: 10px;
  overflow-y: auto;
}

.item {
  background-color: darkolivegreen;
  color: white;
  border: 1px solid gray;
}

<div class="wrapper">
   <div class="header"></div>
   <div class="list">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
  </div>
  <div class="header"></div>
  <div class="list">
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
     <div class="item">4</div>
  </div>
</div>

有没有办法缩小具有设定高度的元素？

Is there a way to shrink an element with set height?

css

grid

flexbox