Question

我花了两个多小时试图弄清楚如何解决这个问题，但没有运气。当我最小化浏览器大小时，我遇到了与背景和页脚重叠的文本问题。 html，body和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;
}

Answer 1

请删除容器类中的高度：100％，您将解决此问题。

Answer 2

使用min-height: 100%;代替height: 100%;

.container {
   min-height: 100%;
   //other css...
}

＆＃13;

	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%;
  min-height: 100%;
  border-top: 4px solid #6B1946;
  color: #405699;
  font-family: 'Asap', sans-serif;
  line-height: 25px;
  letter-spacing: 1.5px;
  text-align: justify;
  overflow: auto;
  }


.footer {
  width: 100%;
  height: 5%;
  background: #4ADBC8;
}

＆＃13;

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

＆＃13;

Answer 3

我检查过您的代码问题是容器高度100％;桌面是好的，但移动设备重叠页脚部分替换此代码您的容器部分。媒体查询

.container{
  background: #17263c;
  width: 100%;
  height: 100%; /*============== This one ==================*/
  border-top: 4px solid #6B1946;
  color: #405699;
  font-family: 'Asap', sans-serif;
  line-height: 25px;
  letter-spacing: 1.5px;
  text-align: justify;
}


@media only screen and (max-width:990px){
    .container{
      height: auto;

    }

}

Answer 4

修复高度100％正在创建该问题。所以请使用下面的CSS，

    .container {
        background: #17263c;
        width: 100%;
        min-height: 95%;
        border-top: 4px solid #6B1946;
        color: #405699;
        font-family: 'Asap', sans-serif;
        line-height: 25px;
        letter-spacing: 1.5px;
        text-align: justify;
        padding: 1px 0;
        box-sizing: border-box;
    }

我将页脚高度（5％）从100％文档高度减少到查看容器+页脚，而无需在有盖屏幕中滚动。还添加了填充（在段落边距内调整）和框大小调整（覆盖边框和高度填充）。

当我缩小浏览器大小时，即使高度设置为100％，文本也会重叠背景？

4 个答案: