0

私がやりたいのは、1 ページ レイアウトのセクション (内部の他のすべてのコンテンツ) です。これらのセクションの一部には、デスクトップの画面の一番下まで到達するのに十分なコンテンツがありませんが、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);
        }
    });
});

誰もがより良い方法を知っていますか? 私はどれくらい離れていますか（/または愚かです）？何でも大歓迎です。

4

3 に答える 3

0

試す

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

});

デモ:フィドル

于 2013-08-05T04:26:11.403 に答える
0

これを行うためにCSSを使用しないのはなぜですか? jsフィドル

body, html, section {
    width:100%;
    height:100%;
}
于 2013-08-05T04:31:38.710 に答える