由于高度百分比导致文本重叠

Question

我目前正在制作网页。我想为标题添加一个背景，该背景会随着浏览器的大小调整 window。这意味着我必须将高度添加到 div 以便我可以用百分比更改背景的高度。当我将高度添加到 div 时，网页的文本重叠了。在添加高度之前，文本非常好。我希望这是有道理的。任何关于为什么文本重叠或如何修复它的帮助将不胜感激。

这是HTML

<div>
      <p>
    <h1>Jonathan's Programming Notes!</h1>
  </p>
  <div>
    <p>
      <h2>Lesson 1</h2>
    </p>
  <div>
    <p>
      <h3>Blah</h3>
    </p>
    <p>
      Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.
    </p>
  </div>
  <div>
    <p>
      <h3>Content</h3>
    </p>
    <p>
      Content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content.
    </p>
  </div>
  <div>
    <p>
      <h3>Stuff</h3>
    </p>
    <p>
      Stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff.
    </p>
  </div>
</div>
<div>
  <p>
    <h2>Lesson 2</h2>
  </p>
  <div>
    <p>
      <h3>Words</h3>
    </p>
    <p>
      Words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words.
    </p>
  </div>
  <div>
    <p>
      <h3>Text</h3>
    </p>
    <p>
      Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.
    </p>
  </div>
</div>
<div>
  <p>
    <h2>Lesson 3</h2>
  </p>
  <div>
    <p>
      <h3>Repetition</h3>
    </p>
    <p>
      Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition.
    </p>
  </div>
  <div>
    <p>
      <h3>QWERTY</h3>
    </p>
    <p>
      QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY.
    </p>
  </div>

这是CSS

div {
height:100vh;}
h1 {
background-image: url("http://gdurl.com/RGD0");
background-repeat: no-repeat;
background-size: 100% 104%;
max-width: 85%;
height: 70%;
font-size: 42px;
font-weight: 700;
text-align: center;
margin-left: auto;

这里是 JSFiddle.

Answer 1

问题是您所有的 div 都设置为 100vh。我为你的其他 div 添加了一个 header div 和一个包装器，并在你的 css 中为它添加了一个 class。希望这是有道理的

body {
  height: 100vh;
  background-image: url("http://gdurl.com/RGD0");
  background-repeat: no-repeat;
  background-size: 85% 70%;
  background-position: center top;
}
h1 {
  max-width: 85%;
  height: 70%;
  font-size: 42px;
  font-weight: 700;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  background-color: blue;
}

<body>
  <header>

    <h1>Jonathan's Programming Notes!</h1>
  </header>
  <div id="wrapper">
    <div>
      <p>
        <h2>Lesson 1</h2>
      </p>
      <div>
        <p>
          <h3>Blah</h3>
        </p>
        <p>
          Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
          blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
          blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.
        </p>
      </div>

      <div>
        <p>
          <h3>Content</h3>
        </p>
        <p>
          Content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
          content content content content content content content content content.
        </p>
      </div>
      <div>
        <p>
          <h3>Stuff</h3>
        </p>
        <p>
          Stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff
          stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff.
        </p>
      </div>
    </div>
    <div>
      <p>
        <h2>Lesson 2</h2>
      </p>
      <div>
        <p>
          <h3>Words</h3>
        </p>
        <p>
          Words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words
          words words words words words words words words words words words words words words words words words words words.
        </p>
      </div>
      <div>
        <p>
          <h3>Text</h3>
        </p>
        <p>
          Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.
        </p>
      </div>
    </div>
    <div>
      <p>
        <h2>Lesson 3</h2>
      </p>
      <div>
        <p>
          <h3>Repetition</h3>
        </p>
        <p>
          Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition
          Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition.
        </p>
      </div>
      <div>
        <p>
          <h3>QWERTY</h3>
        </p>
        <p>
          QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY.
        </p>
      </div>
    </div>
</body>

由于高度百分比导致文本重叠

Text Overlapping Due to Height Percentage

html

css

height

percentage