javascript - 随内容扩展的背景图片

Question

我在需要背景图像随正文内容动态扩展的情况下遇到问题。

function myclick() {
  var text = 'Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.'


  document.getElementById("demo").innerHTML = text + text;

}

html {
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
}

#root {
  height: 100%;
  width: 100%;
}

.background {
  background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-87.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  padding-bottom: 4.2%;
  height: 100%;
}

.base {
  margin: auto;
  background-color: white;
  margin-bottom: 2%;
  height: auto;
  width: 665px;
  display: block;
  border-radius: 5px;
  top: 40px;
  position: relative;
}

<body>
  <div id="root">
    <div class="background">
      <div class="base">
        <p id="demo"></p>

        Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas
        expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram. Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto
        mandamus volutpat. Cum elit libris an. Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur
        id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his. Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu.
        His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei. Duo et summo nobis cotidieque, reque tantas
        consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.
      </div>
    </div>
  </div>
  <button onclick="myclick()">Click me</button>

</body>

如果您单击顶部的按钮，正文内容会增加，但背景的大小仍然保持不变。有什么办法可以让它发挥作用吗？

Answer 1

您可以在 .background 类中使用 min-height:100%; 而不是 height:100%;

function myclick() {
      var text = 'Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.'


      document.getElementById("demo").innerHTML = text + text;

    }

html {
      height: 100%;
      width: 100%;
    }

    body {
      height: 100%;
      width: 100%;
    }

    #root {
      height: 100%;
      width: 100%;
    }

    .background {
      background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-87.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      padding-bottom: 4.2%;
      min-height: 100%;
    }

    .base {
      margin: auto;
      background-color: white;
      margin-bottom: 2%;
      height: auto;
      width: 665px;
      display: block;
      border-radius: 5px;
      top: 40px;
      position: relative;
    }

<body>
      <div id="root">
        <div class="background">
          <div class="base">
            <p id="demo"></p>

            Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas
            expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram. Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto
            mandamus volutpat. Cum elit libris an. Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur
            id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his. Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu.
            His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei. Duo et summo nobis cotidieque, reque tantas
            consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.
          </div>
        </div>
      </div>
      <button onclick="myclick()">Click me</button>

    </body>