主页 / 问题 / 1590896
Accepted
Aldmi
Asked:2024-08-16 13:58:47 +0000 UTC2024-08-16 13:58:47 +0000 UTC

如何防止网格容器中的行高度拉伸？

  • 772

.grid_container {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2fr 1fr;
}
  .item {
    text-align: center;
    background-color: #4a7a60;
    padding: 3px;
    font-size: 35px;
    width: 300px;
    //height: 600px ;
    overflow-y: auto; // если данных много должна появится полоса прокрутки, и не расти высота контейнера
  }
  .zone_1 {
    background-color: #455a64;
  }
  .zone_2 {
    background-color: #455a00;
  }
<div class="grid_container">
  <div class="zone_1">
    <div class="item">
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
    </div>
  </div>

  <div class="zone_2">
    ZONE_2
  </div>
</div>

您好，网格容器中有 2 行，行的高度占据了所有可用空间的比例，grid-template-rows: 2fr 1fr 如果元素的高度在这些行内变大，那么区域也会开始扩展，但我需要滚动才能。出现并且比率 2fr 1fr 不变。如果手动限制元素的高度，溢出时会出现滚动，但元素将无法占据整个分配的行高。

css3

1 个回答

  1. Best Answer

    如果我正确理解你的要求，你想达到类似的效果

    .container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "zone_1"
    "zone_2";
  height: 100vh;
}

.zone_1 {
  grid-area: zone_1;
  background: red;
  text-align: center;
  width: 300px;
  max-height: 600px;
  overflow-y: scroll;
}

.zone_2 {
  grid-area: zone_2;
  background: lightblue;
  width: 300px;
}
    <div class="container">
  <div class="zone_1">
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
    <p>Данные</p>
  </div>
  <div class="zone_2">
    <p>Данные</p>
  </div>
</div>

    • 1

相关问题