使用百分比高度 hack 时忽略溢出值

Question

给定以下 CSS 用于创建响应式正方形网格的声明：

nav a {
  display: block;
  float: left;
  overflow: hidden;
  padding-bottom: 25%;
  width: 25%;
}

nav a p {
  display: none;
}

nav a:hover p {
  display: block;
}

overflow: hidden 在显示子元素时未被遵守。子项似乎扩展了父项的高度并将其父项下方的元素推错了位置。

我很确定这是使用 padding-bottom/percentage 技巧实现灵活方块的结果，因为在使用固定高度时一切都按预期工作。

有解决办法吗？我应该使用其他技术吗？

Fiddle

Answer 1

你是正确的，填充底部导致第五个元素错位。当您将鼠标悬停在 <a> 上时，元素的高度会增加显示的 <p> 的高度，然后在其顶部添加额外的 25% 填充底部，从而导致下面的元素右移。

为避免这种情况，我们可以绝对定位您显示的 <p>，以便在添加填充底部时不计算其高度。

https://jsfiddle.net/2qaz1dLx/2/

至于这是否是个好主意......可能不是，如今现代浏览器对 flexbox 的支持非常好

Answer 2

将 position: absolute 添加到 nav a p class

nav a p {
  position: absolute;
  display: none;
}

nav {
  display: block;
  width: 100%;
}

nav a {
  display: block;
  float: left;
  overflow: hidden;
  padding-bottom: 25%;
  width: 25%;
}

nav a p {
  position: absolute;
  display: none;
}

nav a:hover p {
  display: block;
}

<nav>
  <a>
    one
    <p>one child</p>
  </a>
  <a>
    two
    <p>two child</p>
  </a>
  <a>
    three
    <p>three child</p>
  </a>
  <a>
    four
    <p>four child</p>
  </a>
  <a>
    five
    <p>five child</p>
  </a>
</nav>

使用百分比高度 hack 时忽略溢出值

Overflow value being ignored when using percentage height hack

css

css-hack