使元素至少等于视口的高度

Question

What I'd like to do is have sections (all other content inside) for a one page layout. Some of these sections don't have enough content to reach all the way to the bottom of a screen on desktop, but if I set a 'magic number' value in CSS (ie min-height:1000px) you'd be scrolling forever when viewing on a phone. Inversely, I don't want to cut off conent that extends past viewport height. JavaScript is definitely not my strong point, but here is my (likely god awful) attempt with 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);
        }
    });
});

Anyone know a better way? How far off (/or being stupid) am I? Anything is appreciated.

Answer 1

Try

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

});

Demo: Fiddle

Answer 2

Why not just use CSS to do this? jsFiddle

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

Answer 3

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