Сделайте элемент как минимум высоты окна просмотра

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

}); 

Демо: Fiddle

Answer 2

Почему бы не просто использовать CSS, чтобы сделать это? jsFiddle

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

Answer 3

Почему не отделить стили для каждого просмотров (рабочий стол, мобильный, ...)?