0

我有一个动态加载信息的页面。内容加载,但问题是包含内容(content_container)的 div 会导致页面大小增加(这是预期的),但会导致页脚、页眉和 content_type_container 无法修复。如果在加载内容后调整 html 元素,我希望它。

这是html:

<div id="content_container">

            </div>      

            <div id="content_type_container" style="display:none;">
                <div  class="content_type">
                    Content Type 1
                    <input type="hidden" value="1" class="content_type_value"/>
                </div>
                <div  class="content_type">
                    Content Type 2
                    <input type="hidden" value="2" class="content_type_value"/>
                </div>


            </div>

这是jQuery:

$(document).ready(function() {



    $(".content_type").click(function() {
        var content_type = $(this).find(".content_type_value").val();   
        content_type = $.trim(content_type);
            if(content_type)
            {
                $.ajax({
                    url: "content_type_ajax.php",
                    data: "content_type="+content_type,
                    success: function(msg) {
                    $("#content_container").html(msg);
                    $("#content_container").click(); /* adding this reset the header and footer divs to the new height of the content container. fixing the issue */                            
                }
                });
            }   
        });

        $("#content_type_nav").click(function() {
            $("#content_type_container").slideToggle("fast");


        });
        $(".content_type").click(function() {
            $("#content_type_container").slideToggle("fast");


        });
});

和CSS:

#content_container{
    display:block;


}

#content_type_container{
    position:fixed;
    display:block;
    bottom:0px;
    width:100%;
    z-index:1000;

}



.content_type{
    display:block;
    width:100%;
    text-align:center;

}


.content_type:hover{
    background:blue;
    color:white;

}
4

2 回答 2

2

请尝试位置:相对;而不是固定的

如果您使用滚动条寻找固定高度,则为#content_type_container 提供固定高度和溢出

于 2013-04-01T16:30:54.590 回答
1

如果您对 css 元素设置重要,那么它应该可以按您的意愿工作

#content_type_container{
    position:fixed !important;
    display:block;
    bottom:0px;
    width:100%;
    z-index:1000;
}
于 2013-04-01T16:14:15.987 回答