HTML/CSS - 100％高度不是真正的100＆

我似乎經常遇到這個問題，而且我不確定我犯的錯誤。HTML/CSS - 100％高度不是真正的100＆

我有一個main-body div，它擁有我想要的背景顏色作爲頁面的背景。在潛水中，我得到了一個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"> 
 
    \t <div id="headerFixedWidth"></div> 
 
</div> 
 

 
<div id="mainBody"> 
 
\t <section class="left-content"> 
 
    \t <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> 
 
    \t \t </section> 
 

 
\t <section class="left-content"> 
 
    \t <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> 
 
    \t \t </section> 
 
\t 
 
\t <section class="left-content"> 
 
    \t <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> 
 
    \t \t </section> 
 
\t 
 
\t <section class="left-content"> 
 
    \t <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> 
 
    \t \t </section> 
 
</div>

來源

2016-11-23 Theodore Steiner

您發表評論的方式是錯誤的......應該是'/ * * /'和'不'//除非您正在使用SCSS或某個預處理器。此外，他們出現評論的原因是，它是無效的，最終瀏覽器不知道如何解析它們。所以它不適用這些規則。 –

這是因爲#mainBody具有一個margin：

只需卸下margin-bottom，它會好起來的。

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

來源

2016-11-23 16:28:32

你介意我問你一個後續問題嗎？ –

@TheodoreSteiner請繼續前進...... –

我刪除了margin-bottom（甚至不知道它是如何在那裏得到的），我試着重複該部分幾次，而這些部分重複沒有問題，背景，甚至雖然它是100％只是停在頁面的中間 –

喲不需要在身體保證金（我也鴕鳥政策你爲什麼要使用這個知道...）：

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

來源

2016-11-23 16:39:16 Zer0

這個答案比我的好嗎？ '：''只是好奇而已。 –

如果你只需要改變#mainBody CSS property margin-bottom你應該沒問題！

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

對此

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

來源

2016-11-23 16:45:21

這個答案比我的好嗎？ '：''只是好奇而已。你的答案仍然存在錯誤。 –

@PraveenKumar它沒有，我在網頁上，寫了我的答案，離開編輯器打開了一段時間然後提交：我沒有真正看到你的答案 –

Okie dokie ...'：）' –

HTML/CSS - 100％高度不是真正的100＆

回答

相關問題