Question

我使用Angular，Angular Material和Angular Flex-Layout创建了一组链接，它们的样式类似于卡片或图块。当链接没有悬停时，将显示该链接的图标和标题。悬停时，图标和标题不再显示，并由参考性文本替换。

对于包含大量参考文本的项目，状态的这种变化会导致这些项目的高度增加。

我可以通过用像素对min-height进行硬编码来解决此问题。但是，如果我尝试使用百分比，例如110％，则链接的大小没有变化。对于名为.container的链接周围的div也是如此。

这是节选：

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">

  <a mat-flat-button color="primary" fxFlex href="https://example.com/footprints">
    <div class="hoverOff"><fa-icon [icon]="faToolbox"></fa-icon>Broken</div>
    <div class="hoverOn">Is your request causing an impact to a business-critical function, which is impacting daily production?</div>
  </a>

  <a mat-flat-button color="primary" fxFlex href="https://example.com/divisions/dev/Lists/Requests/NewForm.aspx?isProject=Yes">
    <div class="hoverOff"><fa-icon [icon]="faPuzzlePiece"></fa-icon>Project</div>
    <div class="hoverOn">Is your request a new product or service?<br>
      Requires and RFI or RFP?<br>
      Requires more than 500 or more internal resource hours<br>
      Necessitates a cost greater then $100,000?<br>
      New banking center or remodel?<br>
      New Partnership, divestiture or branch closure?
    </div>
  </a>

</div>

<style>
.mat-flat-button {
    white-space: normal;
    line-height: normal;
}

a {
    color: white !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

fa-icon {
    display: block;
    font-size: 75px;
}

.mat-primary {
    background-color: #00539B !important;
}

a .hoverOn {
    display: none;
}

a:hover .hoverOn {
    display: block;
}

a:hover .hoverOff {
    display: none;
}
</style>

I have created an example of this on StackBlitz.

如何在不对像素进行硬编码的情况下解决这种高度变化？

Answer 1

在使用45%视口高度vh的同时，将以下内容添加到CSS可以防止滚动时高度发生变化

.container{
  height:45vh
}

也可以使用以下内容将容器扩展到vh之外10％，总计110％

.container{
  height:110vh
}

Stackblitz

https://stackblitz.com/edit/angular-w1exhe?embed=1&file=src/app/app.component.css

Answer 2

如果您要调整链接的CSS，可以在a CSS中添加类似的内容：

 max-height:60vh; (or use percentage instead of vh, but set a max-height)   
 overflow-y:auto;
 overflow-x:hidden;

希望这会有所帮助。

Example (I set your icon size to 35pt in this)

防止悬停更改链接的高度

2 个答案: