css - 页面底部的页脚(不粘)即使内容很少

Question

我是 SO 的新手，但过去几年我一直在学习编码。我刚刚启动了我的网页，除了关于/联系页面之外，一切看起来都很好。没有足够的内容让页脚粘在底部，Sticky Footer 代码让它始终存在。我只希望它位于页面底部和内容下方。它在小型浏览器上看起来不错，但在大屏幕上或缩小时效果不佳。

定位absolute和fixed都不行，bottom:0也不行。关于如何将其固定在底部，我的想法已经用完了。

有什么想法吗？？？

这是我的网站:http://yasminpanjwani.com/aboutcontact.html

谢谢!

Answer 1

您可以计算视口(viewport)的高度并为您的主要元素设置一个min-height

如果你使用 jQuery

$(document).ready(function() {

  var viewportHeight = $(document).height();

  $('main').css('min-height', viewportHeight - 200 ); // minus size of your header & footer

});

如果没有；

var $main = document.getElementsByTagName('main'),
    body  = document.body,
    html  = document.documentElement;

var height = Math.max(
              body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight
            );


$main.style.minHeight = height + 'px';