javascript - 如果内容高于视口(viewport)，则 100vh 有回退？

Question

视口(viewport)中的内容是流动的，因此当在较小的设备上查看时，内容高度超过 100vh。我正在考虑只使用 JS 来计算内容 block 的最小高度。如果有 CSS 方法，有什么直接的想法吗？想不出太多......但也许其他聪明人可以:-)

.content.intro {
		
	height: 100vh;
	min-height: 800px; // content can be higher than this
		
	display: flex;
	align-items: center;
	justify-content: center;
    
    margin-top: -80px;
    padding-top: 80px; // adjust for the 80px header at top
 }

Answer 1

感谢您的评论。在这种情况下，它是一个可以超过 100vh 高度的副本 block ，因为它在 flex 布局中居中，所以它会在较小的高度剪裁文本。我的解决方案只是一些在加载和调整大小时触发的简单 JS:

setMinHeight : function() {
  $('.content.intro').each(function() {
    var bodyCopy  = $(this).find('.bodyCopy'),
      padTop    = $(this).css('padding-top').substring(0,2),
      padBottom = $(this).css('padding-bottom').substring(0,2);
      minHeight = bodyCopy.outerHeight(true) + parseInt(padTop) + parseInt(padBottom) + $('header').outerHeight();
			
    $(this).css( { 'min-height' :  minHeight + 'px' });
  });
}

基本上只需设置 bodyCopy 的最小高度，这样视口(viewport)就永远不会比其中的内容小。

在我的例子中 -> 内容高度 + 父级的顶部/底部填充 + 标题的高度以停止重叠