Question

我正在开发一个移动网络应用。这是从上到下的主要结构：标题div，菜单div，内容div，页脚div。标题，菜单和页脚是常量，页面使用ajax加载到内容div中。

有些页面有很多内容，他们会填写页面，因此需要滚动。有些页面只有一两行内容，所以它们留下了一个很大的空白部分（不一定是不同的页面 - 例如，一页显示订单列表，你可以没有订单，你可以有数百......）。

这就是我想要实现的目标：如果页面内容不满，则页脚将位于页面底部。如果页面已满且需要滚动，则页脚将紧跟在内容之后（因此您向下滚动页面，最后到达页脚）。

粘性页脚解决方案对我不利，因为我不希望页脚总是粘在底部，只有当页面没有内容时。

无论如何要实现这一目标吗？感谢。

Answer 1

然后你必须使用javascript - 计算内容的高度 - 从窗口高度减去它并从该距离设置页脚的margin-top：

<强> HTML

<div id="header" class="header">Header</div>
<div id="content" class="content">Content</div>
<div id="footer" class="footer">Footer</div>

JS （此示例使用jQuery，它应该包含在此脚本之前。）

$('#footer').css('margin-top',
  $(document).height() 
  - ( $('#header').height() + $('#content').height() ) 
  - $('#footer').height()
);

您可以在窗口的任何调整大小上放置一个调用此函数的onresize窗口。

[编辑blag：]

以下是 onResize 方法（但min-height而不是margin-top）

Check the JSFiddle

 // function to set the height on fly
 function autoHeight() {
   $('#content').css('min-height', 0);
   $('#content').css('min-height', (
     $(document).height() 
     - $('#header').height() 
     - $('#footer').height()
   ));
 }

 // onDocumentReady function bind
 $(document).ready(function() {
   autoHeight();
 });

 // onResize bind of the function
 $(window).resize(function() {
   autoHeight();
 });

边框，填充和边距

如果您希望计算中包含边框和填充，则可以使用outerHeight()代替height()。或者，outerHeight(true)也包含边距。

Answer 2

CSS粘性页脚应该可以解决您的问题。

Here's an example

这非常容易设置和使用。它会将页脚强行放在页面上，如果内容不够大，无法填充页面，它会粘在底部。

Answer 3

    function autoHeight() {
        var h = $(document).height() - $('body').height();
        if (h > 0) {
            $('#footer').css({
                marginTop: h
            });
        }
    }
    $(window).on('load', autoHeight);

Answer 4

这个解决方案对我有用。如果你不仅仅有#header和#footer，我认为这是完美的。如果body小于视口，它只是用填充底部向下推送内容。

function autoHeight() {
    var bodyHeight = $("body").height();
    var vwptHeight = $(window).height();
    var gap = vwptHeight - bodyHeight;
    if (vwptHeight > bodyHeight) {
        $("#content").css( "padding-bottom" , gap );
    } else {
        $("#content").css( "padding-bottom" , "0" );
    }
}
$(document).ready(function() {
    autoHeight();
});
$(window).resize(function() {
    autoHeight();   
});

Answer 5

根据АлександрМихайлов的回答，以下解决方案对我有效。它找到页脚的底部并确定它是否小于文档高度，并使用页脚的上边距来弥补不足。如果您要随时调整内容大小，此解决方案可能会出现问题。

const createBlotterText = () => {
const text = new Blotter.Text(textEl.innerHTML, {
  family: "sans-serif",
  weight: 700,
  *size: 100vw/500px,*
  paddingLeft: 100,
  paddingRight: 100,
  paddingTop: 100,
  paddingBottom: 100,
  fill: "white"
});

Answer 6

这是我在我的项目中找到的解决方案

function autoHeight() {

    if ( document.body.clientHeight < window.innerHeight ) {
        document.querySelector('#footer').style.position = 'absolute';
        document.querySelector('#footer').style.bottom = '0';
    }
}

document.addEventListener("DOMContentLoaded", function() {
  autoHeight();
});

页面未满时将页脚推到底部

6 个答案: