Question

这是the website我目前正在处理的问题是，我似乎找不到在所有元素下将页脚设置在页面底部的方法。我希望页脚有一个位置：固定，但它位于页面底部的下一页元素下。

部分代码：

#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 or 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;
    }

Answer 2

您可以通过添加margin-bottom: 90px; to #pagination.

来实现此目的

#pagination {
  margin-bottom: 90px;
}

Answer 3

你可以通过添加一个底部来实现这个目标：0px;页脚

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

唯一的区别是底部：0px; 。试试这个

如何在页面底部设置页脚

3 个答案: