位置固定img的父div没有高度/如果高度>大于视口大小，则无法隐藏溢出答案

【问题标题】：Parent div of a position fixed img has no height / Can't apply overflow hidden if height > than viewport size位置固定img的父div没有高度/如果高度>大于视口大小，则无法隐藏溢出
【发布时间】：2016-02-12 12:13:28
【问题描述】：

我正在尝试在 wordpress 博客中实现我的文章通用模板的最后一部分。

我有一个标题/菜单，它是 position: fixed。

然后我有一个 div .postThumbnail 和一个子 img 是 position: fixed 所以滚动时以下内容可以与 img 重叠。

我还有一个 div，它在图像固定时复制 img'height。

事实上，如果.postThumbnail 有一个高度，这可能会容易得多，但它的值等于 0。

我不知道为什么。

我打算做的是设置.postThumbnail的max-height等于视口的高度减去标题/菜单的高度，所以如果图像高于视口，它不会溢出，并且以下可以滚动的内容将出现在图像之后（而不是在图像的总高度之后）。

基本上，我需要定义.postThumbnail 的高度，以便应用overflow:hidden。

有什么想法吗？

我创建了一个JSFiddle，这样你就可以真正看到我在说什么。

目前的一些代码：

#single\.php .postThumbnail img {
  position: fixed;
  z-index: 1;
  width: 100%;
  min-width: 640px;
  height: auto;
}

#single\.php .postThumbnailGhost { /*keep as security even if no content is integrated*/
    visibility: hidden;
}

我需要达到的目标：

#single\.php .postThumbnail{
max-height: calc(100vh - 48px);
overflow: hidden;
}

修复此问题后，我可以修复页面的其余部分，因为内容的 min-height 必须等于图像的高度才能正确覆盖它。

【问题讨论】：

标签： css position height parent-child fixed

【解决方案1】：

嗯，

我真的简化了一切，因为在这个新版本中我不需要.postThumbnailGhost。

我也在 Jquery 中完成了它，因为我无法完全在 CSS (:'() 中完成它。

这是执行这项工作的脚本：

 function refreshDynamicContent(){
  $('.postThumbnail').height($('.wp-post-image').height());
  $('.postThumbnail').css('max-height', $(window).height() - ($('header').height()));
  $('#post').css('min-height', $('.postThumbnail').height());
  }
  refreshDynamicContent();
  $(window).on("resize", refreshDynamicContent);

新JSFiddle

我不再需要溢出，因为我可以将height 设置为窗口的height！

耶！

【讨论】：