如何使用css从div中删除多余的空间？答案

【问题标题】：how to remove extra space from div using css?如何使用css从div中删除多余的空间？
【发布时间】：2021-09-08 02:37:19
【问题描述】：

我在我的演示应用程序中使用了一个 CSS 网格。我有一个有两个子 div 的父 div。在其中一个子 div 中，我给出了 height 的 270px。我想从容器中删除多余的空间。

这是我的code：

.abc{
  display:grid;
    grid-template-columns: repeat(12,6.697%);
    grid-template-rows: 18px repeat(5, 1fe);
   border:1px solid green;
  height:320px
}
.one{
  grid-column: 4/span 6;
   grid-row: 2/span 5;
    border:1px solid;
  min-height:260px;
  height: 270px;  
}
.two {
  grid-row: 1/span 5;
   grid-column: 1/5;
    border:1px solid #ee0;
}

<div class="abc">
  
  <div class="one">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates culpa iste facaudantium Lorem ipsum, 
    </p>
  </div>
  <div class="two">
    tooo
  </div>
</div>

我想删除黑色边框下方的所有空间。我应该降低容器的高度吗？

注意：我希望容器高度取决于 div 的高度。无论我给 270px 还是 290px。容器将一直到没有多余的空间为止。

【问题讨论】：

移除270px的固定高度：codepen.io/Manoj6994/pen/wvegoQO
您可能还需要将 1fe 更改为 1fr 以使该语句生效。

标签： javascript html css css-grid

【解决方案1】：

将父 div (.abc) 高度设置为 auto。

.abc{
  display:grid;
    grid-template-columns: repeat(12,6.697%);
    grid-template-rows: 18px repeat(5, 1fe);
   border:1px solid green;
  height:auto
}
.one{
  grid-column: 4/span 6;
   grid-row: 2/span 5;
    border:1px solid;
  min-height:260px;
  height: 270px;  
}
.two {
  grid-row: 1/span 5;
   grid-column: 1/5;
    border:1px solid #ee0;
}

<div class="abc">
  
  <div class="one">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates culpa iste facaudantium Lorem ipsum, 
    </p>
  </div>
  <div class="two">
    tooo
  </div>
</div>

【讨论】：

感谢您的回答..此声明现在不起作用grid-template-rows: 18px repeat(5, 1fe);
我希望第一行是18px

【解决方案2】：

.abc{
  display:grid;
    grid-template-columns: repeat(12,6.697%);
    grid-template-rows: 18px auto;
   border:1px solid green;
}
.one{
  grid-column: 4/span 6;
   grid-row: 2/span 5;
    border:1px solid;
    min-height:260px;
    height: 270px;  
}
.two {
  grid-row: 1/span 5;
   grid-column: 1/5;
    border:1px solid #ee0;
}

<div class="abc">
  
  <div class="one">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates culpa iste facaudantium Lorem ipsum, 
    </p>
  </div>
  <div class="two">
    tooo
  </div>
</div>

我删除了父 div 的高度并更改了 grid-template-rows: 18px repeat(5, 1fe);到 grid-template-rows: 18px auto;

检查这是否适合您谢谢

【讨论】：