Question

由于某种原因，这段代码中没有设置高度

jQuery(document).ready(function() {



            jQuery('#main-content').css({'height': ((jQuery(window).height()))+'px'})
            jQuery('#nav-icons a').click(function(){

            jQuery('#nav-icons a').removeClass("active-icon");
            jQuery(this).addClass( "active-icon" );

            var toLoad = jQuery(this).attr('href')+' #main-content';
            var toLoadSlider = jQuery(this).attr('href')+' #homepage-slider';

            jQuery('#main-content , #homepage-slider').fadeOut(1000, loadContent);
            function loadContent() {

                jQuery('#homepage-slider').empty().load(toLoadSlider) 
                jQuery('#main-content').empty().load(toLoad,'',showNewContent()) 

            }
            function showNewContent() {
                jQuery('#main-content , #homepage-slider').css({'height': ((jQuery(window).height()))+'px'}).hide().fadeIn(2000).removeAttr('id class');
            } 

            return false;

有趣的是，showNewContent（）中完全相同的代码行确实设置了高度。

Answer 1

唯一合乎逻辑的原因是第一行中的jQuery('#main-content')不是您选择的DOM元素的实际jQuery对象表示。

你必须自己弄明白为什么会出现这种情况。

Answer 2

假设你有

<div id="main-content">
  ... content
</div><!--main-content-->

这应该可以解决问题：

var windowHeight = jQuery(window).height();
jQuery(document).ready(function ($) {
    $('#main-content').css({
        height: windowHeight
    });
    // other scripts
}); // ready

<强> JSFIDDLE

jQuery css高度不适用

2 个答案: