如果页面很短，将 HTML 页脚保持在窗口底部

Posted 2023-03-05

技术标签:

【中文标题】如果页面很短，将 HTML 页脚保持在窗口底部【英文标题】：Keeping HTML footer at the bottom of the window if page is short 【发布时间】：2012-11-01 04:28:49 【问题描述】：

我的一些网页很短。在这些页面中，页脚可能最终位于窗口的中间，而页脚下方是空白（白色）。那看起来很难看。我希望页脚位于窗口底部，并且有限的内容主体会被拉伸。

但是，如果网页很长并且您必须滚动才能看到页脚（或全部页脚），那么一切都会正常运行。

使用 CSS 执行此操作的正确方法是什么？我需要 javascript/jQuery 来实现这一点吗？

我只关心 IE9+ 和其他浏览器的现代版本。页脚的高度也可以随着页面的变化而变化，所以我不想依赖高度。

【问题讨论】：

您可以通过展示您使用的 html 和 CSS 来帮助自己。为什么您的页脚因页面而异？（但既然如此，页面之间页脚的变化有多大？） 【参考方案1】：

考虑到您所有的页脚都在<footer> html 标记内，这是一个使用 jQuery 的简单解决方案。

JS：

$(document).ready(function()
    $('body').css('padding-bottom', $('footer').height()+'px');
);

CSS：

footer 
    position:absolute;
    bottom:0;

【讨论】：

【参考方案2】：

HTML

<body>
    <div class="example">
        <p>Lorem ipsum dolor sit amet consectetur...</p>
    </div>

    <footer>
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
    </footer>
</body>

CSS

body 
    min-height: 100%;


footer 
    position: absolute;
    bottom: 0;

【讨论】：

【参考方案3】：

查看this site。他有一个关于如何使用 css 执行此操作的很好的教程。

我复制了他的 CSS，以防 Matthew 的网站被删除。

html,
body 
   margin:0;
   padding:0;
   height:100%;

#container 
   min-height:100%;
   position:relative;

#header 
   background:#ff0;
   padding:10px;

#body 
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */

#footer 
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;

编辑

由于页脚的高度因页面而异，您可以获取页脚的高度，然后使用 javascript 调整#body padding-bottom。这是一个使用 jquery 的示例。

$(function()
    $('#body').css('padding-bottom', $('#footer').height()+'px');   
);

【讨论】：

看起来需要我知道页脚的高度，对于我的情况可能非常困难。【参考方案4】：

试试this。

它是 Github 用于将页脚保留在页面底部的样式的副本。这有点笨拙，需要您知道页脚的高度（这可能不适用于您的用例）

标记

<div class="wrapper">
<div class="content"><p>Page Content</p></div>
<div class="footer-push"></div>
</div>

<footer>
  <p>footer-text</p>
  <img src="http://placekitten.com/100/100" >
</footer>

CSS（好吧，scss）

// our page element

html 
height:100%;


body 
height:100%;

.wrapper 
background:gray;
min-height:100%;
height: auto !important; // the magic!
height:100%;
margin-bottom:-158px; // the height of our footer + margin


.footer-push 
clear:both;
height:158px; // the height of our footer + margin


footer 
background:rgba(#a388a3,0.8);
margin-top:20px;
height:138px;

这里的重要事情似乎是：

设置高度：包含元素的 100%（尤其是 html 和 body）了解页脚的高度，并使用“push”元素对其进行说明使用min-heightheight: auto !important和height:100%的组合

希望对您有所帮助！

【讨论】：

【参考方案5】：

使用 min-height 属性，虽然不完全可靠，因为某些旧版本可能不支持它。如果您不介意，请添加一些 javascript。

【讨论】：

【参考方案6】：

不，为您的身高设置一个最小值非常容易。

像这样：最小高度：500px；那么最小高度是500px。

【讨论】：

我不知道窗口和其他元素的高度。