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

【问题标题】：Text Overlapping Due to Height Percentage由于高度百分比导致的文本重叠
【发布时间】：2015-10-19 18:24:12
【问题描述】：

我目前正在开发一个网页。我想为标题添加一个背景，该背景会随着浏览器窗口的大小而调整大小。这意味着我必须为 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。

【问题讨论】：

不确定我是否理解这个问题 - 这是你要找的吗？ jsfiddle.net/9yq2wbax/6
这可能是jsfiddle.net/9yq2wbax/8?

标签： html css height percentage

【解决方案1】：

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

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>

【讨论】：

jsfiddle.net/9yq2wbax/8
谢谢！你的回答满足了我的问题。
@Noobie123 很高兴听到这个消息！欢迎来到 Stack Overflow！