Question

视口中的内容是流动的，因此在较小的设备上查看时内容高度超过100vh。我在考虑使用JS来计算内容块的最小高度。如果有CSS方法，有任何想法直接？想不出多少......但也许其他聪明的人可以： - ）

＆＃13;

.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
 }

＆＃13;

Answer 1

感谢您的评论。在这种情况下，它是一个可以超过100vh高度的副本块，因为它以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的最小高度，这样视口就不会小于其中的内容。

在我的情况下 - ＆gt;内容高度+父级的顶部/底部填充+标题的高度以停止重叠

如果内容高于视口，则返回100vh？

1 个答案: