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 Пожалуйста, продолжайте ... –

Я удалил край поля (даже не уверен, как он попал туда lol), и я попытался дублировать раздел еще несколько раз, а в то время как разделы дублируются без проблем, фон, даже хотя он на 100% останавливается на полпути вниз по странице –

Yo не нужен запас на теле (я не знаю, почему вы используете это ...):

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

источник

2016-11-23 16:39:16 Zer0

Как этот ответ лучше моего? ':)' Просто любопытно узнать. –

Если вы просто изменить #mainBody CSS свойство 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 его нет, я был на странице и написал свой ответ и оставил редактор открытым на некоторое время, а затем отправил: p я действительно не видел вашего ответа –

Okie dokie ... ':)' –

HTML/CSS - 100% Высота Не правда 100 &

ответ

Смежные вопросы