Question

I am currently working on a webpage. I wanted to add a background to the title that would resize with the size of the browser window. That meant that I would have to add height to the div so I could change the height of the background with percent. When I added height to the div, the text of the webpage overlapped. Before adding height, the text was perfectly fine. I hope this makes sense. Any help as to why the text overlapped or how to fix it would be appreciated.

Here is the HTML

var sel = document.createElement("droplist"); 
var opt1 = document.createElement("OPTION");
var opt2 = document.createElement("OPTION");
var opt3 = document.createElement("OPTION");

var information = {
  names: ["nameOne", "nameTwo"],
  addresses: ["adressOne", "adressTwo"],
  names: ["phoneOne", "phoneTwo"],
  informationFunction: function additem(){ 
    opt1.value = "1";
    opt1.text = this.addresses[0];    
    opt2.value = "2";
    opt2.text = this.addresses[1];    
    opt3.value = "3";
    opt3.text = this.addresses[3];
    sel.appendChild(opt1);
    sel.appendChild(opt2);
    sel.appendChild(opt3);
  } 
};
information.informationFunction();

Here is the CSS

<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>

Here is the JSFiddle.

Answer 1

the problem was that all your divs were set to 100vh. I added a header div and a wrapper for your other divs and a class for it in your css. hope this makes sense

grep -rnw . -e "sometext"

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;
}

Text Overlapping Due to Height Percentage

1 个答案: