Theodore Steiner Theodore Steiner - 13 days ago 5
CSS Question

HTML/CSS - 100% Height Not truly 100&

I seem to be constantly running into this problem, and I'm not sure where I'm making the mistake.

I have a

main-body div
that is holding a background-color that I want as the background of the page. Within the dive I've got a
section class
with the little sections that are going to be copied over and over again with just the content changed.

If you scroll to the bottom, you'll notice that the background of the main-body div isn't really 100% and leaves this white bar. How might I go about fixing this?



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

It is because of the #mainBody having a margin:

preview

Just remove the margin-bottom and it will be alright.

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