在过去的 2 个小时里，我一直在试图弄清楚如何解决这个问题，但没有成功。当我最小化浏览器大小时，我遇到了文本重叠背景和页脚的问题。 html、正文和 div 设置为 100% 的高度，但仍然存在垂直重叠。我希望文本保留在容器中，容器大小在最小化时调整浏览器大小，并将页脚保持在底部。
非常感谢，非常感谢!
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="page.css">
</head>
<body>
<div class="container">
<h1>Webtwo ipsum blekko insala</h1>
<div class="content">
<p>Webtwo ipsum blekko insala joost zinch babblely, akismet kosmix
quora zoosk, plaxo chegg eduvant. Yuntaa blippy lanyrd zynga jajah, cloudera
squidoo gooru. Stypi eskobo rovio hojoki vuvox jaiku unigo, bebo disqus
airbnb udemy. Mog cotweet palantir imvu wikia zillow cuil, wikia sclipo
squidoo heekya. Chartly prezi qeyno spock chartly glogster, joost ideeli
skype edmodo, wufoo rovio mog palantir. Joukuu yoono oovoo yammer vuvox
convore, zillow sifteo diigo oooooc zooomr convore, napster edmodo woopra
omgpop. Zoosk lijit zynga squidoo oovoo divvyshot elgg, handango zillow
eskobo kazaa. Yuntaa whrrl bitly divvyshot kosmix unigo, edmodo bitly
omgpop. Jabber etsy zooomr yoono cuil, napster xobni jumo. Meevee elgg
blippy qeyno, imeem etsy.
<br>
Tumblr xobni lijit, loopt. zillow wikia. Rovio dropio stypi disqus,
heroku. Zynga cloudera spock zoodles kippt ning, kiko loopt vuvox grockit.
Hipmunk ifttt joyent sclipo, ifttt odeo. Waze zanga empressr, eskobo. plaxo.
Zappos movity oooj jajah imeem, voxy doostang ning. Ning jajah odeo zimbra,
yuntaa koofers. vuvox oooooc. eduvant zapier elgg. Wikia skype nuvvo joost
bitly
sococo jiglu, airbnb akismet ebay cotweet. Zanga meevee spock klout weebly
sclipo hojoki qeyno wesabe, bebo akismet appjet twones bubbli doostang.</p>
</div>
</div>
<div class="footer"> </div>
</body>
</html>
这是 CSS:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
h1{
font-size: 30px;
color: #F82370;
text-align: center;
margin: 70px auto 50px auto;
}
.content{
font-size: 15px;
margin: 0 5% auto 5%;
}
.container{
background: #17263c;
width: 100%;
height: 100%;
border-top: 4px solid #6B1946;
color: #405699;
font-family: 'Asap', sans-serif;
line-height: 25px;
letter-spacing: 1.5px;
text-align: justify;
}
.footer{
width: 100%;
height: 5%;
background: #4ADBC8;
}
最佳答案
请删除容器类中的 height:100%，您将解决此问题。
关于html - 即使高度设置为 100%，当我缩小浏览器大小时，文本会与背景重叠吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48514628/