如何确保我的页脚显示在页面末尾而不是中间？

这里是我的页脚的CSS：如何确保我的页脚显示在页面末尾而不是中间？

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

在多个页面上我有容器的内容文本。在某些页面上，只有足够的内容才能在页面末尾显示页脚。但是在某些情况下没有足够的内容，因此页脚仍然显示在容器下方，但是页面与页尾之间存在差距。我该如何解决这个问题，因此无论容器的长度如何调整？

来源

2013-03-02 KPO

你尝试过吗：底部：0px？ – Mario 2013-03-02 22:18:42

@mario我试过margin-bottom：0px; – KPO 2013-03-02 22:25:45

我已经添加并更新了我的答案，现在您可以看到它与内容负载和几乎没有。祝你好运！ – iConnor 2013-03-02 22:40:37

像这样

<!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-02 22:23:37 iConnor

没有看到相应的HTML，很难猜测你的问题可能是什么。这听起来像是你的主要内容有一个底部边缘，当主要部分内容只有有限的内容时，页面底部向下通过页脚。

要解决该问题，请调整边距或更改页脚的位置。目前，该位置是绝对的，这意味着页脚根据HTML中的父元素进行定位。将定位切换为相对将使其出现在HTML之前的任何元素之后。

在尝试进一步处理问题之前，我建议您阅读more about CSS positioning。

来源

2013-03-02 22:17:51 3nafish

如何确保我的页脚显示在页面末尾而不是中间？

回答

相关问题