Question

如何在不提供position属性的情况下修剪页脚，如

position:fixed

我已经尝试了很多，但是每次页脚都不会站在最底层。有什么建议吗？

Answer 1

也许你正在谈论粘性页脚......

为了使其工作，页脚不能在包装类中。代码必须像这个例子一样结构化：

<div id="page"></div>
<footer id="colophon"></footer>

此外，还需要将body的margin和padding设置为0.就我所知，这是与CSS有关的唯一要求。

body {
    margin: 0;
    padding: 0;
}

jQuery背后的想法非常简单。检查元素的高度，然后检查视口的高度。如果视口高度大于#page的高度，那么我们需要在页脚上设置一些CSS。 CSS只会将它绝对定位在框架的底部。确保页脚的宽度为100％是一个好主意，所以它看起来是正确的。

引入了jQuery并插入了代码。

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  var bodyHeight = $("body").height();
  var vwptHeight = $(window).height();
  if (vwptHeight > bodyHeight) {
   $("footer#colophon").css("position","absolute").css("bottom",0);
  }
});
</script>

为了使用旧版本的IE（＆lt; IE9），请使用Google的HTML5 shiv。

<!– Add conditional for IE7 + 8 support –>   
<!–[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>

See the original demo或jsFiddle

来源：Joseph Fitzsimmons

Answer 2

试试这个

body{margin:0; padding:0;}
.footer{bottom:0 !important; position:absolute; width:100%; height:300px; text-align:center; background:#000; }

Answer 3

------------------这是完整的代码------------------------- ---

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">html, body {    height: 100%;}div.header, div.foo { display:block; text-align: center; }div.header { height:30px; background-color:#f5f5f5 }.navbar-fixed {
  left: 0;  position: fixed;  right: 0;  top: 0;  z-index: 1030;}`.content {
    position: relative;
    min-height: 100%;
    height: auto !important;
    margin-bottom: -50px; /* the bottom margin is the negative value of the footer's height */
}
div.container{
    padding:20px 0px 50px 0px;
}

div.foo {
    height: 50px;
    position: relative;
    background-color:#dddddd;
}

</style>
</head>

<body>
<div class="header navbar navbar-fixed">
    This is the Header
</div>
<div class="content">
    <div class="container">
        <p>see the forest for the trees.</p>

    </div>
</div>
<div style="clear:both;"></div>
<div class="foo">
    This is the footer, which will stay at the bottom!
</div>
</body>
</html>`.content {
    position: relative;
    min-height: 100%;
    height: auto !important;
    margin-bottom: -50px; /* the bottom margin is the negative value of the footer's height */
}
div.container{
    padding:20px 0px 50px 0px;
}

div.foo {
    height: 50px;
    position: relative;
    background-color:#dddddd;
}

</style>
</head>

<body>
<div class="header navbar navbar-fixed">
    This is the Header
</div>
<div class="content">
    <div class="container">
        <p>see the forest for the trees.</p>

    </div>
</div>
<div style="clear:both;"></div>
<div class="foo">
    This is the footer, which will stay at the bottom!
</div>
</body>
</html>`

如何修剪页脚

3 个答案:

See the original demo或jsFiddle