html - 如何防止HTML中两个相同的div重叠？

Question

我正在处理一个具有两个独立列的 HTML 页面。我需要逐对打印两列中的文本，因为我要基于此 HTML 构建一个 JSP。现在我遇到了一些问题，每次我尝试打印一对新文本时，它都会与前一个文本重叠。我尝试在 left-col 和 right-col 样式中添加 clear:both ，但效果仍然不佳。

这是我的 CSS:

header {
  background-color: #74afe0;
  font-size: 35pt;
  text-align: center;
  vertical-align: center;
  height: 80px;
  position: fixed;
  left: 0px;
  right: 0px;
  width: 100%;
  top: 0;
  line-height: 80px;
}

footer {
  background-color: #74afe0;
  position: fixed;
  bottom: 0px;
  width: 100%;
  left: 0px;
  height: 1em;
  text-align: right;
}

.container {
  margin-top: 80px;
  left: 0;
  bottom: 0;
  position: relative;
}

.container p,
ul,
h2 {
  margin: 0;
}

#left-col {
  width: calc(30% - 1.5em);
  text-align: right;
  color: #74afe0;
  position: fixed;
  left: 1em;
  overflow: auto;
}

#right-col {
  width: calc(70% - 2.5em);
  bottom: 1em;
  height: calc(100% - 80px - 1em);
  top: 80px;
  position: fixed;
  right: 1em;
  overflow: scroll;
  border-left: 3px solid #74afe0;
  padding-left: 1em;
}

#list {
  margin: 0;
}

#content {
  font-size: 25px;
}

<header>CSS Layout Project</header>
<div class="container">
  <section id="left-col">
    <div id="title">
      <p>
        <h2><b>Course Description</b></h2>
      </p>
    </div>
    <div id="content">
      <p>fields</p>
    </div>
  </section>
  <section id="right-col">
    <p>
      <h2><b>Acdemic Integrity</b></h2>
    </p>
    <div id="content">
      <p>For years I have been driving an old used car with a lot of mileage, and I hate it. It gets me where I need to go, but I’m tired of fixing leaks and broken parts all the time. It's annoying that I have to take it to the mechanic every time. Even
        when they take care of everything, I know in a week I’ll just end up going back there.</p>
    </div>
  </section>
  <section id="left-col">
    <div id="content">
      <p>fields</p>
    </div>
  </section>
  <section id="right-col">
    <div id="content">
      <p>For years I have been driving an old used car with a lot of mileage, and I hate it. It gets me where I need to go, but I’m tired of fixing leaks and broken parts all the time. It's annoying that I have to take it to the mechanic every time. Even
        when they take care of everything, I know in a week I’ll just end up going back there.</p>
    </div>
  </section>
</div>
<footer>&copy; Copyright by XXXXXX</footer>

Answer 1

您不应该在这些左/右部分使用固定定位。很难告诉你该怎么做，因为我不知道这个页面的理想布局应该是什么样子，但是删除固定定位并将 flex 应用于父级 flex-wrap: wrap允许您使用现有的 CSS 并以我猜测更接近您的最终目标的方式进行布局。我还删除了一些不必要的 CSS 并向 .container 添加了 margin-bottom以便为固定页脚留出空间。

还将您的 id 更改为类，正如其他人指出的那样，每页应该只有 1 个 id。

header {
  background-color: #74afe0;
  font-size: 35pt;
  text-align: center;
  height: 80px;
  position: fixed;
  left: 0px;
  right: 0px;
  width: 100%;
  top: 0;
  line-height: 80px;
}

footer {
  background-color: #74afe0;
  position: fixed;
  bottom: 0px;
  width: 100%;
  left: 0px;
  height: 1em;
  text-align: right;
}

.container {
  margin-top: 80px;
  margin-bottom: 1.5em;
  left: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
}

.container p,
ul,
h2 {
  margin: 0;
}

.left-col {
  width: calc(30% - 1.5em);
  text-align: right;
  color: #74afe0;
  overflow: auto;
}

.right-col {
  width: calc(70% - 2.5em);
  bottom: 1em;
  height: calc(100% - 80px - 1em);
  overflow: scroll;
  border-left: 3px solid #74afe0;
  padding-left: 1em;
}

.content {
  font-size: 25px;
}

<header>CSS Layout Project</header>
<div class="container">
  <section class="left-col">
    <div id="title">
      <p>
        <h2><b>Course Description</b></h2>
      </p>
    </div>
    <div class="content">
      <p>fields</p>
    </div>
  </section>
  <section class="right-col">
    <p>
      <h2><b>Acdemic Integrity</b></h2>
    </p>
    <div class="content">
      <p>For years I have been driving an old used car with a lot of mileage, and I hate it. It gets me where I need to go, but I’m tired of fixing leaks and broken parts all the time. It's annoying that I have to take it to the mechanic every time. Even
        when they take care of everything, I know in a week I’ll just end up going back there.</p>
    </div>
  </section>
  <section class="left-col">
    <div class="content">
      <p>fields</p>
    </div>
  </section>
  <section class="right-col">
    <div class="content">
      <p>For years I have been driving an old used car with a lot of mileage, and I hate it. It gets me where I need to go, but I’m tired of fixing leaks and broken parts all the time. It's annoying that I have to take it to the mechanic every time. Even
        when they take care of everything, I know in a week I’ll just end up going back there.</p>
    </div>
  </section>
</div>
<footer>&copy; Copyright by XXXXXX</footer>

您还可以使用 float 实现类似的布局而不是flex

header {
  background-color: #74afe0;
  font-size: 35pt;
  text-align: center;
  height: 80px;
  position: fixed;
  left: 0px;
  right: 0px;
  width: 100%;
  top: 0;
  line-height: 80px;
}

footer {
  background-color: #74afe0;
  position: fixed;
  bottom: 0px;
  width: 100%;
  left: 0px;
  height: 1em;
  text-align: right;
}

.container {
  margin-top: 80px;
  margin-bottom: 1.5em;
  left: 0;
  bottom: 0;
}

.container p,
ul,
h2 {
  margin: 0;
}

.left-col {
  width: calc(30% - 1.5em);
  text-align: right;
  color: #74afe0;
  overflow: auto;
  float: left;
  clear: left;
}

.right-col {
  width: calc(70% - 2.5em);
  bottom: 1em;
  height: calc(100% - 80px - 1em);
  overflow: scroll;
  border-left: 3px solid #74afe0;
  padding-left: 1em;
}

.content {
  font-size: 25px;
}

<header>CSS Layout Project</header>
<div class="container">
  <section class="left-col">
    <div id="title">
      <p>
        <h2><b>Course Description</b></h2>
      </p>
    </div>
    <div class="content">
      <p>fields</p>
    </div>
  </section>
  <section class="right-col">
    <p>
      <h2><b>Acdemic Integrity</b></h2>
    </p>
    <div class="content">
      <p>For years I have been driving an old used car with a lot of mileage, and I hate it. It gets me where I need to go, but I’m tired of fixing leaks and broken parts all the time. It's annoying that I have to take it to the mechanic every time. Even
        when they take care of everything, I know in a week I’ll just end up going back there.</p>
    </div>
  </section>
  <section class="left-col">
    <div class="content">
      <p>fields</p>
    </div>
  </section>
  <section class="right-col">
    <div class="content">
      <p>For years I have been driving an old used car with a lot of mileage, and I hate it. It gets me where I need to go, but I’m tired of fixing leaks and broken parts all the time. It's annoying that I have to take it to the mechanic every time. Even
        when they take care of everything, I know in a week I’ll just end up going back there.</p>
    </div>
  </section>
</div>
<footer>&copy; Copyright by XXXXXX</footer>