使元素至少等於視口的高度

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

嘗試

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

為什么不僅僅使用CSS來做到這一點呢？ jsFiddle

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

Answer 3

為什么不為每個視圖（桌面，移動設備，...）分開樣式？