时间戳

首页 > 解决方案 > 内容重叠并覆盖部分

html - 内容重叠并覆盖部分

问题描述

我有一个页脚，它的位置是固定的，所以无论你是否在页面底部，它都会保持在底部。我的问题是它没有背景，所以正文实际上与页脚的一部分重叠。

我试图给 body 一个 max-height ，它不起作用，以及一个 margin-bottom ，它是页脚的高度，但这也不起作用。

这是一张图片（社交媒体图标是页脚，“体验”是身体的一部分）： 身体重叠页脚。

如何让正文的内容在接触页脚时停止而不重叠？我也更喜欢保持页脚的背景透明。我知道当您向页脚添加背景时，可以解决所有问题，但是对于我的网站来说，没有背景更加一致。

下面是我的一些代码在页脚和正文中的基本外观。

body {
    display: flex;
    flex-direction: column;
    margin: 0px;
    background-image: url('../img/mountain-bg.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 100;
}

footer {
    display: flex;
    flex: 0 0 40px;
    margin-top: auto;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 40px;
    flex-shrink: 0;
}
<body>
  <div style="font-size: 50px">
    Test text here
  </div>
  <div style="font-size: 50px">
    Test text here
  </div>
  <div style="font-size: 50px">
    Test text here
  </div>
  <div style="font-size: 50px">
    Test text here
  </div>
  <div style="font-size: 50px">
    Test text here
  </div>
 </body>
 <footer>
  <a>Links here</a>
  <a>More footer stuff</a>
 </footer>

标签： htmlcss

解决方案

也许是这样的？您不想直接设置正文的样式，因为页脚会受到正文样式的影响。相反，您可以将所有内容包装在一个单独的容器中。此方法将页脚设置为相对于视口高度的高度，然后将内容设置为填充视口高度的其余部分（页脚 + 内容 = 100vh）。然后，在您的内容中添加溢出以使其滚动。这样，页脚总是在底部占据 5vh，但内容不会重叠。

body{
  margin: 0;
  padding: 0;
}

.content {
  height: 95vh;
  background: red;
  overflow: auto;
}

footer {
position: fixed;
bottom: 0;
  height: 5vh;
  width: 100%;
}
<body>
<div class="content">
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<footer>Footer</footer>
</body>

推荐阅读