如何修复高度，所以物品不会改变容器div的高度？

Question

目前它看起来像这样：

我希望房子图标不会调整包含框的大小，我目前使用容器来保持高度和宽度相等。

这是scss：

$darkred: rgb(71, 0, 0);

.sidenav {
    background-color: #000860;
    left: 0;
    width: 15%;
}

.item {
    display: block;
    overflow: hidden;
}

.content-container {
    background-color: #0789f4;
    right: 0;
    top: 0;
    height: 900px;
}

.container {
    background-color: $darkred;
    &:hover {
        background-color: adjust-hue($darkred, 90deg);
    }
    width: 100%;
    padding-top: 100%; 
    position: relative; 
    border: 1px red solid;
}

HTML：

 <mat-sidenav-container>
  <mat-sidenav #sidenav mode="side" [(opened)]="opened" class="sidenav" 
  [fixedInViewport]="true" [fixedTopGap]="0"
  [fixedBottomGap]="0">>
  <div class="container">
    <div class="item">
      <mat-icon>home</mat-icon>
    </div>
  </div>
  <div class="container">
    <div class="item">

    </div>
  </div>
  <div class="container">
    <div class="item">

    </div>
  </div>
  </mat-sidenav>

  <mat-sidenav-content class="content-container">
    <p><mat-checkbox [(ngModel)]="opened">sidenav.opened</mat-checkbox></p>
    <p><button mat-button (click)="sidenav.toggle()">sidenav.toggle()</button></p>
  </mat-sidenav-content>
</mat-sidenav-container>

我更希望房子成为div的中心并增加尺寸，但是，我可以（希望）自己解决这个问题，我已经看了谷歌和其他答案，但他们似乎不适合我。

Answer 1

这种情况正在发生，因为您正在使用padding-top: 100%;技巧创建方块。内容总是在内容周围添加填充，因此使用padding-top，您的内容将在下方绘制。您可以通过为.item类提供属性position: absolute;来更改它。这将使项目相对于它的包含块而不是正常流程。如果希望在每个容器的底部呈现项目，可以添加bottom: 0;属性以指定偏移量。 （您可能还想给它一个height: 100%以防止它溢出容器。）