Question

在使用AJAX将内容插入上述DIV后，我无法将页脚DIV移动到页面底部。所以最初当页面加载页脚DIV位于底页页面时，但是在AJAX将大量内容插入到上面的DIV之后，页脚就会停留在那里并且不会自动更新并移动到底部。

任何人都知道如何解决这个问题？我在页面加载后使用jQUERY插入AJAX内容。

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

提前致谢。

<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>

Answer 1

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

我不鼓励使用内联样式

＆＃13;

<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>

＆＃13;

Answer 2

使用position：static;底部：0;你总是可以强迫你的元素留在屏幕的底部。在您的内容容器中添加底部填充，以便您的页脚不会重叠内容。

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

2 个答案: