隨內容擴展的背景圖像

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

您可以只使用min-height:100%; 代替height:100%; 在.background類中

 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> 

Answer 2

有一個CSS屬性Background-Size

https://www.w3schools.com/cssref/css3_pr_background-size.asp

background-size: cover可能很適合您的用例。 另一個選擇是contain 。

Answer 3

刪除背景類的高度，並向其添加一個浮點數（也為其設置寬度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%; /* height: 100% */ width: 100%; /* To manage float resize */ float: left; /* To follow content height */ } .base { margin: auto; background-color: white; margin-bottom: 2%; height: auto; width: 665px; display: block; border-radius: 5px; top: 40px; position: relative; } 

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