Javascript 和 Css : Height does not change

Question

我正在使用 javascript 自定义滚动条，我也在那个滚动条中交换内容，唯一的问题是当我切换不同的内容时，高度与原始 div 保持相同并且不会调整，我不能找出原因。

这是我的 Javascript:

$(window).load(function(){
(function($) {
    $.fn.Fader = function() {
        this.each(function() {
            $('.clickme').bind('click', function(e) {
                e.preventDefault();
                $( "#mediaswap div" ).fadeOut();
                $( "#mediaswap div" + $(this).attr('name') ).fadeIn();
            })
        });
    }
})(jQuery);


$(function() {
    $('#mediaswap').Fader();
});
});//]]> 

安迪我的 CSS:

#media_scroll{position:absolute; margin:0; width:590px; height:334px;}
#media_scroll .customScrollBox{position:relative; height:100%; overflow:hidden;}
#media_scroll .customScrollBox .container{position:relative; width:565px; top:0; float:left;}
#media_scroll .customScrollBox .content{clear:both;}
#media_scroll .dragger_container{position:relative; background: url(images/assets/track-bkg.jpg) no-repeat; width:10px; height:324px; float:left; margin:10px 0 0 10px; cursor:pointer;}
#media_scroll .dragger{position:absolute; width:14px; height:22px; background: url(images/assets/dragger.gif) no-repeat; margin-left:-3px; text-align:center; overflow:hidden; cursor:pointer;}
#media_scroll .dragger_pressed{position:absolute; width:14px; height:22px; margin-left:-3px; overflow:hidden;}

div“内容”是其中包含不同高度的不同 div 的 div。

非常感谢所有帮助!

Answer 1

尽管缺少代码，我还是要试试这个:

.content 只能调整到 334px，因为您将其设置为 #media_scroll 的最大高度。尝试使用 min-height: 334px; 或 height: auto; 看看是否有帮助。您还可以使用 jquery 来调整 #media_scroll 的大小。

此外，发布代码，将其添加到 jsfiddle.net确实可以帮助我们解决您的问题。

另外，Tyrsuis 的观点:

$( "#mediaswap div"+ $(this).attr('name') ).fadeIn();

应该更像:

$( "#mediaswap div "+ $(this).attr('name') ).fadeIn();

但请记住，如果 $(this).attr('name') 不会添加 '.'或“#”到选择器。所以你最终可能会尝试调用类似的东西:

$("#mediaswap div elementName")

代替:

$("#mediaswap div #elementName")