HTML/CSS - 100% 高度不是真正的 100&

Question

我似乎一直运行陷入这个问题，我不确定我在哪里犯了错误。

我有一个 main-body div，它包含我想要作为页面背景的背景颜色。在 dive 中，我有一个 section class，其中的小部分将被一遍又一遍地复制，只是内容发生了变化。

如果滚动到底部，您会注意到主体的背景 div 并不是真正的 100%，并留下了这个白色条。我该如何解决这个问题？

*
{
    margin: 0;
    padding: 0;
}

#header
{
    height: 230px;
    width: 100%;
    background-color: #0099CC;
    display: block;
}

#headerFixedWidth
{
    width: 85%;
    height: 230px;
    //border: 1px solid #ccc;
    margin: 0 auto;
}

#nav
{
    //border: 1px solid #ccc;
    height: 35px;
    width: 700px;
    margin: 0 auto;
    margin-top: 40px;
}

#mainBody
{
    background-color: #F1F4F9;
    width: 100%;
    //height: 100%;
    margin-bottom: 30px;
}

.left-content
{
    height: 550px;
    width: 581px;
    background-color: white;
    margin-left: 20px;
}

.title
{
    font-family: 'Lato', sans-serif;
    color: #ccc;
    font-size: 37px;
    font-weight: bold;
    color: #4E5E6A;
    margin: 20px 30px;
    text-shadow: rgba(78, 94, 106, .2) .1px .1px 2px -1px;
}

.author-subline
{
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #4E5E6A;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 30px;
}

.article-text
{
    font-family: 'Lato', sans-serif;
    font-size: 17px;
    color: #4E5E6A;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 30px;
    margin-right: 10px;
    line-height: 1.56;
}

.readMore
{
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    color: #4E5E6A;
    margin-top: 15px;
    margin-bottom: 30px;
    margin-left: 30px;
    margin-right: 10px;
}

 <div id="header">
   <div id="headerFixedWidth"></div>
</div>

<div id="mainBody">
 <section class="left-content">
   <p class="title">Minim perferendis placeat</p>
    <p class="author-subline">Minim perferendis placeat modi</p>
    <p class="article-text">Minim perferendis placeat modi, vitae porttitor exercitation dolorum duis atque ridiculus luctus earum!.</p> 
     <p class="readMore">Read More</p>
   </section>

 <section class="left-content">
   <p class="title">Minim perferendis placeat</p>
    <p class="author-subline">Minim perferendis placeat modi</p>
    <p class="article-text">Minim perferendis placeat modi, vitae porttitor exercitation dolorum duis atque ridiculus luctus earum!.</p> 
     <p class="readMore">Read More</p>
   </section>
 
 <section class="left-content">
   <p class="title">Minim perferendis placeat</p>
    <p class="author-subline">Minim perferendis placeat modi</p>
    <p class="article-text">Minim perferendis placeat modi, vitae porttitor exercitation dolorum duis atque ridiculus luctus earum!.</p> 
     <p class="readMore">Read More</p>
   </section>
 
 <section class="left-content">
   <p class="title">Minim perferendis placeat</p>
    <p class="author-subline">Minim perferendis placeat modi</p>
    <p class="article-text">Minim perferendis placeat modi, vitae porttitor exercitation dolorum duis atque ridiculus luctus earum!.</p> 
     <p class="readMore">Read More</p>
   </section>
</div>

Answer 1

这是因为 #mainBody 有一个 margin:

去掉margin-bottom就可以了

#mainBody {
  background-color: #F1F4F9;
  width: 100%;
  margin-bottom: 0;                    /* Do this... */
}

Answer 2

你在 body 处不需要保证金（我也不知道你为什么要使用这个...）：

#mainBody {
  background-color: #F1F4F9;
  width: 100%;
}

Answer 3

如果你只是改变 #mainBody CSS 属性 margin-bottom 你应该没问题！

#mainbody{
    background-color: #F1F4F9;
    width: 100%;
    //height: 100%;
    margin-bottom: 30px;
}

对此

#mainbody{
    background-color: #F1F4F9;
    width: 100%;
    //height: 100%;
}

HTML/CSS - 100% 高度不是真正的 100&

HTML/CSS - 100% Height Not truly 100&

html

css

height

HTML/CSS - 100% 高度 不是真正的 100&

HTML/CSS - 100% Height Not truly 100&

html

css

height

HTML/CSS - 100% 高度不是真正的 100&