html - 为什么我的页脚元素覆盖了页面内容？

标签 html css footer

首先，我对 HTML 和 CSS 编码非常陌生。我已经学习了整整一周，我想我应该练习一下，尝试帮助我记住一些元素、特性和属性。因此，您即将看到的代码可能会伤害您的眼睛，但是对此事的任何帮助都将受到极大的欢迎。

我正在设计一个网站(即使是最终形式也很可能永远不会上线)，我开始摆弄页脚元素。稍后，我发现您可以为页脚创建一个 div 元素。然而，无论我使用哪种方法，它最终总是会覆盖屏幕上的文本。它确实会粘在页面底部，直到我向下滚动，并且它始终覆盖正文内容。我知道这可能是由于 CSS 代码对主体进行样式化造成的，但我一生都无法弄清楚。

我暂时将其保留为 div，但如果使用页脚会更好，请告诉我。我绝对想在遇到任何错误时立即完善它们。

nav a {
  color: black;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.2em;
  padding: 12px;
  text-decoration: none;
  width: 80%;
  text-align: center;
  padding-left: 5em;
  padding-right: 2em;
}

.row {
  display: flex;
}

.left-column {
  height: 40vh;
  flex: 50%;
}

.right-column {
  height: 35vh;
  flex: 50%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

#right-col-home {
  background-image: url(https://s3.amazonaws.com/bprblogassets/blog/wp-content/uploads/2017/06/11165212/Power-Washing-Beginner.png);
  margin-top: 12em;
}

.nav-bar {
  border-width: 0em;
  border-color: ghostwhite;
  border-bottom: 0.15em solid gray;
  font-family: 'Poppins', sans-serif;
  background-color: ghostwhite;
  overflow: auto;
  padding: 0.8em;
  margin-bottom: 2em;
}

.second-body {
  font-family: 'Poppins', sans-serif;
  padding-left: 10em;
  padding-right: 10em;
  color: slategray;
}

.main-heading {
  font-size: 3em;
  color: slategrey;
}

.body-text {
  font-size: 1.0em;
}

.job-list {
  font-size: 1.0em;
}

.main-body {
  background-color: ivory;
  min-height: 400px;
  margin-bottom: 100px;
  clear: both;
}

.question {
  font-size: 1.7em;
  font-weight: bolder;
}

.answer {
  font-size: 1em;
}

.footer-bottom {
  background: #343a40;
  color: #686868;
  height: 50px;
  text-align: center;
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding-top: 20px;
}
<head>
  <title>Cleaning by Mark</title>
  <meta name="viewport" content="width=device-width, initial scale=1">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans&display=swap" rel="stylesheet">
  <link href="styles.css" rel="stylesheet">
</head>
<body class="main-body">
  <nav class=nav-bar>
    <span style="font-size: 1.5em; font-weight: bold; color: slategray;">Commercial Cleaning</span>
    <a href="index.html">HOME</a>
    <a href="faq.html">FAQ</a>
    <a href="contact.html">CONTACT</a>
    <a href="gallery.html">GALLERY</a>
  </nav>
  <div class="second-body">
    <div class="row">
      <div class="left-column">
        <h1 class="main-heading">FAQ</h1>
        <h2>Some frequently asked questions with answers:</h2>
        <br>
        <br>
        <h2 class="question">What services do you provide?</h2>
        <h3 class="answer">A whole range of services is on offer, from patio and driveway cleaning to roof and conservatory cleaning! Feel free to check out the services offered on the 'Home' page. If you still have a question, or would like to enquire about another service,
          feel free to access the 'Contact' page and get in touch any time.</h3>
        <h2 class="question">What are your prices?</h2>
        <h3 class="answer">It's always difficult to provide an accurate quote without first assessing the job. However, Mark will happily provide a free no obligation quote - you may be surprised!</h5>
          <br>
          <h2 class="question">Are you able to clean rooves on houses?</h2>
          <h3 class="answer">Yes! Mark's reach isn't limited to bungalows, conservatories and annexes. With his state-of-the-art equipment, he will be able to clean all the moss and dirt from house rooves too!</h5>
            <h2 class="question">Do I need to provide anything?</h2>
            <h3 class="answer">Here at Commercial Cleaning, we will provide all tools and chemicals required to clean the job. However, there may need to be an access for water - this is more possible with larger jobs. But rest assured, there will be no cost to you - the
              cost of water will be deducted from your final invoice!</h3>
      </div>
      <div class="right-column" id="right-col-home">
      </div>
    </div>
  </div>
  <!-- Footer -->
  <div class="footer-bottom">
    &copy; 2022 | commercialcleaning.com | Designed by Kieran|
  </div>
</body>

提前致谢。

最佳答案

删除您的vh单位，这些在这种情况下是有问题的，因为在较小的设备上，过多的文本可能超出设置 vh并在footer下方“出血” .

然后更改您的footer至position: relative;并设置 min-height: 100%;关于.second-body .

html,
body {
  margin: 0;
  height: 100%;
}

nav a {
  color: black;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.2em;
  padding: 12px;
  text-decoration: none;
  width: 80%;
  text-align: center;
  padding-left: 5em;
  padding-right: 2em;
}

.row {
  display: flex;
}

.left-column {
  height: 100%;
  flex: 50%;
}

.right-column {
  flex: 50%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

#right-col-home {
  background-image: url(https://s3.amazonaws.com/bprblogassets/blog/wp-content/uploads/2017/06/11165212/Power-Washing-Beginner.png);
}

.nav-bar {
  border-width: 0em;
  border-color: ghostwhite;
  border-bottom: 0.15em solid gray;
  font-family: 'Poppins', sans-serif;
  background-color: ghostwhite;
  overflow: auto;
  padding: 0.8em;
  margin-bottom: 2em;
}

.second-body {
  font-family: 'Poppins', sans-serif;
  padding-left: 5em;
  padding-right: 5em;
  color: slategray;
  display: flex;
  min-height: 100%;
}

.main-heading {
  font-size: 3em;
  color: slategrey;
}

.body-text {
  font-size: 1.0em;
}

.job-list {
  font-size: 1.0em;
}

.main-body {
  background-color: ivory;
  min-height: 400px;
  margin-bottom: 100px;
  clear: both;
}

.question {
  font-size: 1.7em;
  font-weight: bolder;
}

.answer {
  font-size: 1em;
}

.footer-bottom {
  background: #343a40;
  color: #686868;
  padding: 25px 0;
  text-align: center;
  position: relative;
  bottom: 0px;
  left: 0px;
  padding-top: 20px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Cleaning by Mark</title>
  <meta name="viewport" content="width=device-width, initial scale=1">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans&display=swap" rel="stylesheet">
  <link href="styles.css" rel="stylesheet">
</head>

<body class="main-body">
  <nav class=nav-bar>
    <span style="font-size: 1.5em; font-weight: bold; color: slategray;">Commercial Cleaning</span>
    <a href="index.html">HOME</a>
    <a href="faq.html">FAQ</a>
    <a href="contact.html">CONTACT</a>
    <a href="gallery.html">GALLERY</a>
  </nav>
  <div class="second-body">
    <div class="row">
      <div class="left-column">
        <h1 class="main-heading">FAQ</h1>
        <h2>Some frequently asked questions with answers:</h2>
        <br>
        <br>
        <h2 class="question">What services do you provide?</h2>
        <h3 class="answer">A whole range of services is on offer, from patio and driveway cleaning to roof and conservatory cleaning! Feel free to check out the services offered on the 'Home' page. If you still have a question, or would like to enquire about another service,
          feel free to access the 'Contact' page and get in touch any time.</h3>
        <h2 class="question">What are your prices?</h2>
        <h3 class="answer">It's always difficult to provide an accurate quote without first assessing the job. However, Mark will happily provide a free no obligation quote - you may be surprised!</h5>
          <br>
          <h2 class="question">Are you able to clean rooves on houses?</h2>
          <h3 class="answer">Yes! Mark's reach isn't limited to bungalows, conservatories and annexes. With his state-of-the-art equipment, he will be able to clean all the moss and dirt from house rooves too!</h5>
            <h2 class="question">Do I need to provide anything?</h2>
            <h3 class="answer">Here at Commercial Cleaning, we will provide all tools and chemicals required to clean the job. However, there may need to be an access for water - this is more possible with larger jobs. But rest assured, there will be no cost to you - the
              cost of water will be deducted from your final invoice!</h3>
      </div>
      <div class="right-column" id="right-col-home"></div>
    </div>
  </div>
  <!-- Footer -->
  <div class="footer-bottom">
    &copy; 2022 | commercialcleaning.com | Designed by Kieran|
  </div>
</body>

关于html - 为什么我的页脚元素覆盖了页面内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73721568/

上一篇：react-native - 模拟 i18n-js 中的 I18n 类，以便在 React Native 中使用 Expo 进行 Jest 测试

下一篇：python - NATS WEBSOCKET Python WebSocket 连接

相关文章：

php - 使用 Laravel - Php 将输入值传递给 URL

html - 防止 iframe "This webpage is not available."错误在网站上显示

html - 忽略按钮宽度属性？

css - 让我的页脚 div 颜色在响应式设计中垂直。 Bootstrap 3

html - 清除页脚以防止内容重叠

javascript - 克隆第一个 div 并使用类名追加到下一个 div 之后

java - 我们如何为循环创建的多个文本框指定相同的名称

html - 并排使用 float <div>

html - 媒体查询中的 css 未被应用

css - 粘性页脚问题

©2024 IT工具网  联系我们