代码之家  ›  专栏  ›  技术社区  ›  Alexander Abakumov

使用display:grid和scroll时没有底部填充

  •  0
  • Alexander Abakumov  · 技术社区  · 5 年前

    我有一个集装箱 div display: grid overflow: auto 准备好了。当一个孩子 分区

    这是一个 Fiddler

    .container {
        background: red;
        display: grid;
        height: 300px;
        padding: 3em;
        overflow: auto;
        width: 300px;
    }
    
    .child {
        height: 500px;
        background: #000;
    }
    <div class="container">
        <div class="child"></div>
    </div>

    但是,如果容器是由 显示:网格

    显示:网格

    0 回复  |  直到 5 年前
        1
  •  1
  •   Temani Afif    5 年前

    不确定这是预期结果还是错误,但解决方法是考虑使用额外的元素(使用伪元素)来恢复填充:

    .container {
        background: red;
        display: grid;
        height: 300px;
        padding: 3em;
        overflow: auto;
        width: 300px;
    }
    
    .container:after {
      content:"";
      height:3em;
    }
    
    .child {
        height: 500px;
        background: #000;
    }
    <div class="container">
        <div class="child"></div>
    </div>