Question

我想要做的是有一个页面布局的部分（所有其他内容）。其中一些部分没有足够的内容可以一直到达桌面上的屏幕底部，但如果我在CSS中设置一个“幻数”值（即最小高度：1000px），你将永远滚动在手机上查看时。相反，我不想切断超过视口高度的锥形。 JavaScript绝对不是我的强项，但这是我的（可能是上帝可怕的）尝试与Jquery：

$(document).ready(function () {
    //make sections at least as tall as the viewport
    $(window).height(function () {
        if ('section'.height <= window.height) {
            $('section').css('height', window.height);
        }
    });
});

任何人都知道更好的方法吗？我有多远（/或者是傻瓜）？一切都很受欢迎。

Answer 1

尝试

$(document).ready(function () {
    //make sections at least as tall as the viewport

    var $sections = $('section').each(function(){
        var $this = $(this);
        $this.data('oheight', $this.height())
    });

    $(window).resize(function(){
        var winheight = $(window).height();
        $('section').each(function(){
            var $this = $(this), oheight = $this.data('oheight') || $this.height();
            $this.css('height', oheight <= winheight ? winheight : oheight);

            //remove this
            $this.find('.height').text(oheight <= winheight ? winheight : oheight)
        })
    }).resize()

});

演示：Fiddle

Answer 2

为什么不使用CSS来做到这一点？的 jsFiddle

body, html, section { width:100%; height:100%; }

Answer 3

为什么不为每个视图（桌面，移动设备......）分隔您的样式？

使元素至少为视口的高度

3 个答案: