1

这是我的页脚CSS：

 .footer {
      background-color: #CACACA;
      font-size: 20px;
      height: 50px;
      padding-top: 10px;
      position: absolute;
      text-align: center;
      width: 100%;
      }

在多个页面上，我有包含文本的容器。在某些页面上，只有足够的内容，页脚才会出现在页面末尾。但在某些情况下，内容不足，因此页脚仍显示在容器下方，但与页面末尾之间存在间隙。我该如何解决这个问题，以便无论容器的长度如何都能调整？

4

2 回答 2

3

像这样

  <!DOCTYPE html>
<html>
<head>
    <title>My Amazing Footer</title>
    <style>
    html, body {
       margin:0;
       padding:0;
       height:100%;
    }
    .wrapper {
       min-height:100%;
       position:relative;
    }
    footer{
        background:#F1F1F1;
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height:300px;
    }

    footer p{
        text-align: center;
        padding-top:100px;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="Content">
            <p>HTML Ipsum Presents</p>
        </div>
        <footer>
            <p>&copy; My Website 2013. All Rights Reserved!</p>
        </footer>

    </div>
</body>
</html>

看到我们在包装器中有页脚，页脚绝对位于包装器的底部和左侧，然后我们只需将页脚的高度添加到包装器底部填充以及包装器和主体上的一些默认高度，然后排序，取看看这里的 jsfiddle - http://jsfiddle.net/eTwJh/2/这是一个没有内容的 - http://jsfiddle.net/eTwJh/3/

于 2013-03-02T22:23:37.077 回答
1

如果没有看到相应的 HTML，很难猜测您的问题可能是什么。听起来您的主要内容有一个底部边距，当该主要部分内只有有限的内容时，它会将页面底部向下推到页脚之外。

要修复它，要么调整该边距，要么更改页脚的位置。目前，位置是绝对的，这意味着页脚是根据其在 HTML 中的父元素定位的。将定位切换为相对将使其出现在 HTML 中任何元素之前的任何元素之后。

我建议您在尝试进一步解决这个问题之前阅读更多关于 CSS 定位的信息。

于 2013-03-02T22:17:51.793 回答