标记

Question

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

但是，如果网页很长并且你必须滚动才能看到页脚（或所有页面），那么事情就应该正常了。

使用CSS执行此操作的正确方法是什么？我是否需要Javascript / jQuery来实现这一目标？

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

Answer 1

结帐this site。他有一个关于如何用css做这个的好教程。

我复制了他的CSS，以防万一马修的网站被删除。

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'); });

Answer 2

尝试this。

这是Github用来将页脚保持在页面底部的样式的副本。这有点hacky，并要求您知道页脚的高度（这可能不适合您的用例）

标记

<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" alt="footer image">
</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）
了解页脚的高度，并使用“推送”元素对其进行说明
使用min-height height: auto !important和height:100%

希望有所帮助！

Answer 3

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

Answer 4

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

JS：

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

CSS：

footer {
    position:absolute;
    bottom:0;
}

Answer 5

不，很容易设定身高的最小值。

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

Answer 6

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

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

6 个答案:

标记

CSS（嗯，scss）