在加载AJAX内容后，使页脚DIV保持最低点

I'm having problems making the footer DIV move to the bottom of the page after inserting content into the above DIV using AJAX. So initially when page loads the footer DIV is at bottom page page, but after the AJAX inserts lots of content into the above DIV, the footer just stays there and does not update itself and moves to the bottom.

在使用AJAX将内容插入上述DIV后,我在使页脚DIV移动到页面底部时遇到问题。因此,当页面加载页脚DIV位于底页页面时,但是在AJAX将大量内容插入到上面的DIV之后,页脚就会停留在那里并且不会更新自身并移动到底部。

Anyone knows how to fix this? I'm using jQUERY to insert AJAX content after page onload.

谁知道如何解决这个问题?我正在使用jQUERY在页面onload之后插入AJAX内容。

I already tried using position:absolute; bottom:0; left:0 on the footer div, but still stays there after AJAX call.

我已经尝试过使用position:absolute;底部:0; left:在页脚div上为0,但在AJAX调用后仍然保持在那里。

Thanks in advance.

提前致谢。

<body style="width:100%; height:100%;" onload="displayContent()">
    <div id="main" style="width:100%; height:100%;" >
        <div id="header" style="width:100%; height:10%;">
            <div style="width:100%; height:100%;">
                <div  style="display:inline; float:left; width:10%; height:100%;">Logo</div>
                <div  style=" display:inline; float:right; width:90%; height:100%;">Navigation Links</div>
            </div>
        </div>
        <div style="width:100%; height:5%;">
            Navigation links go here
        </div>
        <div id="body" style="width:100%; height:75%;">
            <div id="content" style="display:inline; float:left; width:70%; height:100%;">Main content from AJAX call after page onload goes here</div>
            <div  style="display:inline; float:right; width:30%; height:100%; background:red;">Other stuff here</div>
        </div>
        <div id="footer" style="width:100%; height:10%;">
            FOOTER NEEDS TO UPDATE ITSELF AFTER AJAX CALL
        </div>
    </div>
</body>

2 个解决方案

#1

The problem comes from the percentage heights you've set to the elements. You need to either give the #body element an auto height, or make it respond to content changes using overflow property.

问题来自您为元素设置的百分比高度。您需要为#body元素指定一个自动高度,或者使用overflow属性来响应内容更改。

I'm not encouraging the use of inline styles

我不鼓励使用内联样式

<body style="width:100%; height:100%;" onload="displayContent()">
    <div id="main" style="width:100%; height:100%;" >
        <div id="header" style="width:100%; height:10%;">
            <div style="width:100%; height:100%;">
                <div  style="display:inline; float:left; width:10%; height:100%;">Logo</div>
                <div  style=" display:inline; float:right; width:90%; height:100%;">Navigation Links</div>
            </div>
        </div>
        <div style="width:100%; height:5%;">
            Navigation links go here
        </div>
        <div id="body" style="width:100%; height:auto; overflow: hidden;">
            <div id="content" style="display:inline; float:left; width:70%; height:100%;">Main content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes here</div>
            <div  style="display:inline; float:right; width:30%; height:100%; background:red;">Other stuff here</div>
        </div>
        <div id="footer" style="width:100%; height:10%;">
            FOOTER NEEDS TO UPDATE ITSELF AFTER AJAX CALL
        </div>
    </div>
</body>

#2

using position: static; bottom:0; you can always force your element to stay at bottom of screen. add bottom-padding to your content-container so that your footer will not be overlapping contents.

使用位置:静态;底部:0;你总是可以强迫你的元素留在屏幕的底部。在您的内容容器中添加底部填充,以便您的页脚不会重叠内容。

#1