html - 如何在页面底部设置页脚

Question

这是 the website我目前正在处理，我的问题是我似乎无法找到一种方法来在所有元素下的页面底部设置页脚。我希望页脚有一个 position:fixed，但它位于页面底部的下一个页面元素之下。

部分代码:

#footer {
    clear: both;
    margin: 0 auto;
    position: fixed;
    text-align: center;
    bottom: 1%;
    height: 6%;
    width: 100%;
    padding: 2%;
    z-index: 500;
    background-color: rgba(0, 0, 0, 0.6);
}

.content {
    overflow: hidden;
    background-color: #ffffff;
    margin: 70px 0 0 0;
    }

.content-middle {
    float: left;
    width: 50%;
}

.content-left {
    float: left;
    width: 56%;
}

.content-right {
    float: right;
    width: 60%;
}

Answer 1

更新样式使用margin-bottom

   #pagination 
   {
    display: block;
    text-align: center;
    margin: 0 auto;
    clear: both;
    padding: 0.4% 0;
    background-color: rgb(255, 255, 255);
    color: #999;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 150px;
   }

添加删除空白，然后使用 height: auto !important; 更新样式。因为在你的搜索结果之后，你的 li 或 class="reteta" 设置了 height:350px

#retete.simple-style li.reteta {
    width: 98%;
    max-width: 680px;
    min-width: 280px;
    height: auto !important;
    float: none;
    display: block;
    background: none;
    box-shadow: none;
}

或其他明智的简单添加样式

#retete.simple-style li.reteta {        
        height: auto !important;
    }