Question

我正在尝试将类div的特定.fullscreen的高度设为100％。所以我使用下面的脚本 - 它的工作非常出色！

// Fullscreen    
$(document).ready(sizeContent);   
$(window).resize(sizeContent);    
function sizeContent() {    
    var newHeight = $("html").height() - $("#header").height() + "px";
    $(".fullscreen").css("height", newHeight);    
}

但是，如果您可以在这里查看：http://loaistudio.com/sub/test - 尝试调整屏幕大小，当屏幕尺寸低于1024时，您是否会看到div消失？这是因为当屏幕尺寸低于2014px时，#header为displayed as none; ...

我相信正在发生的事情与“$("#header").height()”的位有关，所以该函数依赖于#header也可以工作，但由于标题没有显示，所以它不会工作...我该如何解决这个问题？谢谢！

Answer 1

$(selector).css({height: '80px'})

其他

$(selector).css('height', '80px');

Answer 2

我认为下面的代码可以解决隐藏标题的问题。

<强> HTML

<header id="header">
    header one
   </header>
<header id="headerTwo">
    header Two
</header>

<section id="wrapper">container</section>

<强> CSS

#header {height:100px; background-color:grey;}
#headerTwo {height:50px; display:none;  background-color:yellow;}
    #wrapper{ background-color:orange}
@media only screen and (max-width: 1024px) {
    #header {display:none;}
    #headerTwo {display:block;}

}

jQuery改变高度

function setLayout(){
    var headerH;
    if( $('#header').is(':visible')){
        headerH = $('#header').height()
    } else if( $('#headerTwo').is(':visible')){
        headerH = $('#headerTwo').height()
    };

    $('#wrapper').css({
        height : $(window).height() - headerH
    })
};

$(window).on('resize', function(){ setLayout(); });

代码中的

尝试$(window).height()而不是$('html').height();

工作示例：Demo

在Jquery中添加高度

2 个答案: