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

标签 javascript jquery html css twitter-bootstrap-3

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

最佳答案

要使部分元素始终至少具有视口(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 个媒体查询,这会增加样式表的大小,也可能会增加所需的处理能力。

关于javascript - 窗口高度为 100% 的响应式设计,当父 div 内容大于定义的高度时推送兄弟 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28657264/

相关文章:

javascript - 如何在div中插入脚本src?

php - WooCommerce 中产品缩略图的 slider

php 和 MySQL 初学者接受用户输入、修改数据库并返回值

javascript - 为 jQuery AJAX 调用实现加载指示器

HTML 下拉菜单在 OSX 上显示不同

JavaScript - 将字符串变量传递给 eval

grep 函数中的每个 JavaScript

javascript - { [错误 : failed [405] HTTP method not allowed, 支持的方法:POST] 堆栈:[Getter] }

javascript - PHP 和 jQuery 与 AJAX 上传不工作

javascript - 我们可以在用户点击事件上将输入隐藏变量传递到新页面吗?