javascript - 窗口高度为 100% 的响应式设计，当父 div 内容大于定义的高度时推送兄弟 div

Question

<section>
   <div class="section-wrap">
     <h1>page1</h1>
   </div>
</section> 
<section>
   <div class="section-wrap">
    <h1>page2</h1>
   </div>
</section> 

我尝试使用 javascript 但只有当 div 内容小于定义的高度时才有效

 <script type="text/javascript">
    $(function(){
    var windowH = $(window).height();
    var wrapperH = $('section').height();
    if(windowH > wrapperH) {                            
        $('section').css({'height':($(window).height())+'px'});
    }                                                                               
    $(window).resize(function(){
        var windowH = $(window).height();
        var wrapperH = $('section').height();
        var differenceH = windowH - wrapperH;
        var newH = wrapperH + differenceH;
        var truecontentH = $('.section-wrap').height();
        if(windowH > truecontentH) {
            $('section').css('height', (newH)+'px');
        }

    })          
});
    </script>

Answer 1

要使部分元素始终至少具有视口(viewport)的高度，请使用此 CSS:

section {
    min-height: 100vh;
}

很漂亮well supported , 甚至 IE 从版本 9 向上支持它。有一个值得注意的异常(exception):iOS 7 中的移动版 Safari 支持错误。

要避免这个问题，您可以使用 JavaScript。通过使用 polyfill 或类似的东西:

jQuery(document).ready(function() {
    jQuery(window).on('resize orientationchange', function() {
        var windowHeight = jQuery(window).height();
        jQuery('section').css('min-height', windowHeight + 'px');
    });
});

但是，如果没有 JS，这将停止工作。我也相信它可能需要大量计算。

另一种方法是将这样的规则添加到您的 CSS 中:

@media (min-height: 1000px) {
    section {
        min-height: 1000px;
    }
}

@media (min-height: 1010px) {
    section {
        min-height: 1010px;
    }
}

// Same for many other heights.

这里的问题是可维护性，因为您需要超过 100 条规则。但这可以使用 CSS 预处理器来解决。在 LESS 中它可能看起来像这样:

.min-height-100vh(@height) when @height > 0 {
    @media (min-height: @height) {
        min-height: @height;
    }

    .min-height-100vh(@height - 10px);
}

section {
    .min-height-100vh(3000px);
}

这将生成大约 300 个媒体查询，这会增加样式表的大小，也可能会增加所需的处理能力。