CSS 响应式 div 防止因隐藏溢出而中断答案

【问题标题】：CSS responsive div prevent cutting off with overflow hiddenCSS 响应式 div 防止因隐藏溢出而中断
【发布时间】：2018-08-22 06:40:29
【问题描述】：

我正在将此布局用于保持纵横比的响应式 div。它工作得很好，但它需要overflow: hidden，要清楚它是在:after 中定义的padding-top: 56.25%。如果 wrapper 没有溢出，则下一个元素（在本例中为 href 链接）被阻止。

我的问题是：有没有办法在包装器上没有 overflow: hidden 的情况下达到相同的结果？我需要一些元素在包装外可见而不被切断。

如果您在小窗口中看不到问题，请在整页中打开 sn-p。

#wrapper {
  position: relative;
  max-width: 1000px;
  min-width: 350px;
  max-height: 383px;
  border: 1px solid;
  /*overflow:hidden;*/
}

#wrapper:after {
  padding-top: 56.25%;
  display: block;
  content: '';
  background: rgba(0,0,0,.25);
}

<div id="wrapper"></div>
<a href="#">click me</a>

【问题讨论】：

减少顶部填充
添加您在包装器 div 中的任何内容（例如 .content），然后将 #wrapper 放在 .content 中 - 这应该适合您。
@chriskirknielsen 你能举个例子吗？

标签： css responsive-design overflow aspect-ratio

【解决方案1】：

您可以添加一个内部 div 并像以前一样使用伪元素使其响应，并在其上应用overflow: hidden;。然后添加另一个同级 div 并设置您希望应用的样式，在示例中为 div #test，如您所见，它将在包装器之外可见。

#wrapper {
  position: relative;
  max-width: 1000px;
  border: 1px solid;
}

#inner {
  min-width: 350px;
  max-height: 383px;
  overflow: hidden;
}

#inner:after {
  background: rgba(0,0,0,.25);
  padding-top: 56.25%;
  display: block;
  content: '';
}

#test {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translateY(100%);
  width: 100px;
  height: 50px;
  background: aqua;
}

<div id="wrapper">
  <div id="inner"></div>
  <div id="test"></div>
</div>
<a href="#">click me</a>

【讨论】：