文章/答案/技术大牛

发布

社区首页 >问答首页 >当我缩小浏览器大小时，即使高度设置为100%，文本也会重叠背景？

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

Stack Overflow用户

提问于 2018-01-30 13:43:39

回答 4查看 671关注 0票数 1

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

html

css

回答 4

Stack Overflow用户

回答已采纳

发布于 2018-01-30 14:39:45

请移除container类中的高度:100%，您将修复此问题。

票数 1

Stack Overflow用户

发布于 2018-01-30 13:57:17

使用min-height: 100%;而不是height: 100%;

.container {
   min-height: 100%;
   //other 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%;
  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;
}

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

票数 0

Stack Overflow用户

发布于 2018-01-30 14:03:02

我已经检查了你的代码问题是容器高度100%；桌面是好的，但移动设备重叠页脚部分替换此代码你的容器部分。with media query

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

    }

}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48514628

复制

相似问题

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

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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