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

要使剖面元素始终至少具有视口的高度，请使用此CSS：

section {
    min-height: 100vh;
}

非常well supported，甚至IE从版本9开始支持它。有一个值得注意的例外：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个媒体查询，这会增加样式表的大小，还可以增加所需的处理能力。

Answer 2

谢谢大家，我想出了解决方案，这适用于ie8 +以及所有浏览器以及移动设备

＆＃13;

html,
body {
  height: 100%;
}
section {
  min-height: 100%;
}

＆＃13;

<body>
  <section>
    <h1>section 1</h1>
  </section>
  <section>
    <h1>section 2</h1>
  </section>
</body>

＆＃13;

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

2 个答案: