html - 无法 overflow hidden : hidden; and transform: translate: -100%; 的标题

Question

我想用 overflow: hidden 隐藏一个超出容器的标题:

HTML:

<div>
  <h1>Heading</h1>
</div>

CSS:

div {
  overflow: hidden;
}
h1 {
  transform: translateY(100%);
}

http://codepen.io/Deka87/pen/jBYXre

然而，这会使部分标题可见。有什么想法吗？

Answer 1

它没有完全隐藏的原因是因为 h1 上下有一个边距，这不占 100% 偏移量

你可以尝试设置 margin: 0