堆栈内存溢出
  繁体   English   中英

内容部分重叠页脚

[英]Content section overlap footer

 原文  2015-06-15 01:27:26  7   8    html/ css/ twitter-bootstrap/ css3/ twitter-bootstrap-3

问题描述

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

演示

码 

<!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>

8 个解决方案

解决方案1
 3  2015-06-15 01:46:04

当我们使用绝对定位时，我们将绝对定位的元素移到文档流之外，它将忽略文档布局的其余部分，这是造成重叠的原因。

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

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

我竟然在大屏幕电视上对此进行了测试，它似乎产生了想要的结果。 除页脚外，所有代码与您的相同

解决方案2
 2  2015-06-19 05:53:32

这可能仅仅是您首先说的事实： 

body {
    margin-bottom: 60px;
}

然后几行说： 

body {
    margin: 0;
    padding: 0;
}

哪个会覆盖边距底部并将其重置为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
}

至少在我的测试中，两者都做同样的事情，但是body标签可能不太混乱。 希望可以解决它。

解决方案3
 1  2015-06-15 02:09:19

取消position: absolute; 

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

例

解决方案4
 1  2015-06-15 02:30:25

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

然后，我在页脚的p子元素中添加了样式： 

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

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

这是一个链接 。

解决方案5
 1  2015-06-15 03:54:05

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

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

解决方案6
 1  2015-06-15 11:19:15

尝试以下代码 

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

}

我在雷德蒙德（Redmond）的页脚中添加了填充。 不要删除职位。 它应该为您工作。

解决方案7
 1 已采纳  2015-06-21 04:50:25

  1. 删除- position: absolute footer position: absolute
  2. 为页面内容创建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>

小提琴

解决方案8
 0  2015-06-19 14:52:10

我假设： 

footer {
    position: absolute;
}

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

我的解决方案是在页脚上添加padding-top。 

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

这就是它的样子

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 页脚内容重叠 使页脚不重叠内容 固定页脚重叠内容 清除页脚以防止内容重叠 页脚部分与主体内容重叠 避免AngularJS bar-footer重叠内容 Webkit 浏览器中的内容/页脚重叠问题 页脚徽标未正确对齐并与页脚内容重叠 动态内容重叠页脚但保留在内容流中？ 如何将页脚重叠在主要内容区域上而不隐藏内容
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM