12

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

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

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

我只关心 IE9+ 和其他浏览器的现代版本。页脚的高度也可以从一页到另一页，所以我不想依赖高度。

4

6 回答 6

13

看看这个网站。他有一个关于如何使用 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');   
});
于 2012-11-12T18:33:56.207 回答
2

试试这个。

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

这里重要的事情似乎是：

  • 设置高度：包含元素（esphtml和body）的 100%
  • 知道你的页脚的高度，并用“push”元素来解释它
  • 使用和的min-height height: auto !important组合height:100%

希望有帮助！

于 2012-11-12T18:37:49.723 回答
0

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;
}
于 2015-12-07T22:54:24.047 回答
0

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

JS：

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

CSS： 

footer {
    position:absolute;
    bottom:0;
}
于 2018-05-21T18:49:46.697 回答
-2

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

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

于 2012-11-12T18:06:20.483 回答
-3

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

于 2012-11-12T18:10:45.090 回答