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

Make an element at least the height of the viewport

本文关键字：视口 高度 元素      更新时间：2023-09-26

我想做的是为一页布局提供部分（所有其他内容都在里面）。其中一些部分没有足够的内容，无法一直到达桌面屏幕的底部，但如果我在CSS中设置一个"幻数"值（即最小高度：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);
        }
    });
});

有人知道更好的方法吗？我离（或愚蠢）有多远？任何东西都值得赞赏。

为什么不直接使用CSS来实现这一点jsFiddle

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

为什么不为每个视图（桌面、移动、…）分离样式？

尝试

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

相关文章：