我有一个使用jQuery load()加载页眉和页脚的页面。我使用2个div并将内容加载到它们中:
<script>
$(document).ready(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
<script>
<body>
<div>
<div id="header"></div>
<div id="content">
<!--page content-->
</div>
<div id="footer"></div>
</div>
</body>
Footer.html
<footer class="main-footer">
<!-- To the right -->
<div class="pull-right hidden-xs">
<b>Version</b> 1.0
</div>
<!-- Default to the left -->
<strong>Company name</strong>
</footer>
在我从自己的文件中打开页眉和页脚之前,页面加载正常。现在,当我加载页脚时,只是从页面底部推出,导致页面滚动。页脚并不总是需要可见,但如果页面内容没有填满屏幕,它应该只在底部。
我相信这种情况正在发生,因为填充窗口的页面内容然后将页脚附加到底部而不是页面内容加载的页脚。如何让页脚停止被推离屏幕底部?
解决方案:首先,我删除了div标签,并将其替换为页脚和标头标签。然后我从footer.html和header.html文件中删除了页脚和标题标记。最后,我编辑了样式表,在页脚和页眉中都包含一个最小高度。为页脚和页眉添加最小高度分配的空间,它们不再被推离屏幕。