javascript - 使元素至少达到视口的高度

Question

我想做的是为一页布局设置部分（里面的所有其他内容）。其中一些部分没有足够的内容一直到达桌面屏幕的底部，但如果我在 CSS 中设置一个“幻数”值（即 min-height: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

为什么不为每个视图（桌面，移动，...）分开你的样式？

Answer 2

尝试

$(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()

});

演示：小提琴

Answer 3

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

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