Question

我有一个页面如下，在大屏幕上工作正常，但在小屏幕中，主要部分与页脚重叠。如何将页脚始终位于页面底部。同样在小屏幕中，页脚的位置应该基于页面的内容。换句话说，如果内容很长，它应该将页脚推到页面底部。它们都不应该与另一个重叠。

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css">

<style>
footer {
    bottom: 0;
    height: 60px;
    position: absolute;
    width: 100%;
}
body {
    margin-bottom: 60px;
}
html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0;
    padding: 0;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.mainsection{
    width: 100%;
    margin: 0 0 1em 0;
    box-shadow: 0px 0px 1px 1px black;
    background: white;
    display: flex;
}

.innersection {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    max-width: 1900px;
    width: 100%;
    margin: 0 auto;
    padding: 1em;
}

.mainsection>img {
    height: 74px;
    width: 120px;
    margin: 0 5px 0 0;
}

.mainsection>span {
    width: calc(100% - 55px);
    margin-left: 2%;
}

@media ( min-width :599px) {
    .mainsection{
        width: 49%;
        margin: 0 2% 1em 0;
    }
}

@media ( min-width :599px) and (max-width:1024px) {
    .mainsection:nth-child(2n + 2) {
        margin: 0 0 1em 0;
    }
}

@media ( min-width :1024px) {
    .mainsection{
        width: 24%;
        margin: 0 1.3333333333% 1em 0;
    }
    .mainsection:nth-child(4n + 4) {
        margin: 0 0 1em 0;
    }
}
<!--
/
mainsectionisements
-->
</style>
</head>

<body>

<div class="container">
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
</div>
<ul class="innersection">
    <li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
            <p>This is line 3</p>
            <p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
    </span></li>
        <li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
            <p>This is line 3</p>
            <p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
    </span></li>
        <li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
            <p>This is line 3</p>
            <p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
    </span></li>
        <li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
            <p>This is line 3</p>
            <p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
    </span></li>
        <li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
            <p>This is line 3</p>
            <p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
    </span></li>
        <li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
            <p>This is line 3</p>
            <p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
    </span></li>
        <li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
            <p>This is line 3</p>
            <p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
    </span></li>
        <li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
            <p>This is line 3</p>
            <p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
    </span></li>

</ul>



    <footer>

<p>This is the footer.This is the footer.This is the footer.This is the footer.This is the footer.</p>
</footer>
</body>
</html>

Answer 1

当我们使用绝对定位时，我们将绝对定位的元素放在文档流的外部，它将忽略文档布局的其余部分，这是导致重叠的原因。

但是 - 即使在非常大的屏幕上，您也希望页脚能够粘在底部。所以我们使用绝对定位来实现这一点，但是然后在页脚的高度上添加等于或大于padding-top以防止用户向下滚动时重叠。

footer {
    bottom: 0;
    height: 60px;
    width: 100%;
    position:absolute;
    padding-top:60px;
}

我甚至在大屏幕电视上测试它，它似乎产生你想要的结果。除页脚

外，所有代码都与您的代码相同

Answer 2

这可能只是你首先说的事实：

body {
    margin-bottom: 60px;
}

然后几行说：

body {
    margin: 0;
    padding: 0;
}

会覆盖margin-bottom并将其重置为0？

当我将身体样式合二为一时（有两套样式会导致混淆，我完全建议删除第二个身体{}）

body {
    margin: 0 0 60px 0;
    padding: 0
}

它看起来效果很好。

我还在html和body标签中尝试了margin-bottom和padding-bottom。这实际上取决于你在边界和背景方面做了什么，但另一种方法是：

body {
    margin: 0;
    padding: 0
}
html {
    padding-bottom: 60px;
    ... other html styles
}

两者都做同样的事情，至少在我的测试中，但身体标签可能不那么令人困惑。希望这能解决它。

Answer 3

删除position: absolute;

footer {
    bottom: 0;
    height: 60px;
    width: 100%;
}

example

Answer 4

与其他答案一样，我取出position:absolute并将其默认为position:static

然后我将样式添加到页脚的p子项中：

footer {
   bottom: 0;
   height: 60px;
   position: static;
   width: 100%;
}

footer p {position:absolute; bottom:0; height:0px;}

Here's a link

Answer 5

删除底部：0;和位置：页脚绝对

footer {
    bottom: 0;
    height: 60px;
    position: absolute;
    width: 100%;
}

Answer 6

尝试以下代码

footer {
bottom: 0;
height: 60px;
position: absolute;
padding-top:50px;
width: 100%;

}

我雷德蒙德在页脚中填充了Padding。不要移除这个位置。它应该适合你。

Answer 7

删除position: absolute footer
为页面内容创建wrapper以向下推footer

html,
body {
  height: 100%;
}

body {
    margin: 0;
    padding: 0;    
}

.wrapper {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

footer {
    bottom: 0;
    height: 60px;
    width: 100%;
    background: #ccc;
}

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.mainsection{
    width: 100%;
    margin: 0 0 1em 0;
    box-shadow: 0px 0px 1px 1px black;
    background: white;
    display: flex;
}

.innersection {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    max-width: 1900px;
    width: 100%;
    margin: 0 auto;
    padding: 1em;
}

.mainsection>img {
    height: 74px;
    width: 120px;
    margin: 0 5px 0 0;
}

.mainsection>span {
    width: calc(100% - 55px);
    margin-left: 2%;
}

@media ( min-width :599px) {
    .mainsection{
        width: 49%;
        margin: 0 2% 1em 0;
    }
}

@media ( min-width :599px) and (max-width:1024px) {
    .mainsection:nth-child(2n + 2) {
        margin: 0 0 1em 0;
    }
}

@media ( min-width :1024px) {
    .mainsection{
        width: 24%;
        margin: 0 1.3333333333% 1em 0;
    }
    .mainsection:nth-child(4n + 4) {
        margin: 0 0 1em 0;
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container">
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
    <p>This is the container body</p>
</div>
<ul class="innersection">
    <li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
            <p>This is line 3</p>
            <p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
    </span></li>
        <li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
            <p>This is line 3</p>
            <p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
    </span></li>
        <li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
            <p>This is line 3</p>
            <p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
    </span></li>
        <li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
            <p>This is line 3</p>
            <p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
    </span></li>
        <li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
            <p>This is line 3</p>
            <p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
    </span></li>
        <li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
            <p>This is line 3</p>
            <p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
    </span></li>
        <li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
            <p>This is line 3</p>
            <p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
    </span></li>
        <li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
            <p>This is line 3</p>
            <p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
    </span></li>

</ul>
</div>


    <footer>

<p>This is the footer.This is the footer.This is the footer.This is the footer.This is the footer.</p>
</footer>

Fiddle

Answer 8

我假设：

footer {
    position: absolute;
}

绝对必要，因为删除它也会起作用（在大多数情况下）。

我的解决方案是在页脚上添加填充顶部。

footer {
    bottom: 0;
    height: 60px;
    position: absolute;
    width: 100%;
    padding-top: 50px;
}

This is what it looks like

内容部分重叠页脚

8 个答案: