Нижний колонтитул внизу, где содержимое переполняет нижний колонтитул

У меня есть макет страницы с нижним колонтитулом, который находится внизу страницы. Проблема в том, что я использую некоторые div с контентом, который является FLOAT. Если я опускаю float, то контент ведет себя правильно и не переполняет нижний колонтитул. Пожалуйста, см:Нижний колонтитул внизу, где содержимое переполняет нижний колонтитул

`enter code here` 
http://jsfiddle.net/8o7t4wq9/1/ 


CSS: 
html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
} 

HTML: 
<div id="container"> 
    <div id="header"></div> 
    <div id="body"> 
     <div style="width:100%;min-height:500px;background-color:gray;clear:both;">IMAGES</div> 
     <div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left">First box of content</div> 
     <div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left">Second box of content</div> 
    </div> 
    <div id="footer">FOOTER</div> 
</div>

источник

2015-06-17 Lukáš Ježek

'сноска {ясно: как;}' – madalinivascu

#footer { 
    position:absolute;//remove 
    bottom:0;//remove 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
    clear:both;//add 
}

источник

2015-06-17 11:33:16 madalinivascu

Try добавить родительский DIV своим плавали дивы и добавить clearfix к родителю.

html, 
 
body { 
 
    margin:0; 
 
    padding:0; 
 
    height:100%; 
 
} 
 
#container { 
 
    min-height:100%; 
 
    position:relative; 
 
} 
 
#header { 
 
    background:#ff0; 
 
    padding:10px; 
 
} 
 
#body { 
 
    padding:10px; 
 
    padding-bottom:60px; /* Height of the footer */ 
 
} 
 
#footer { 
 
    position:absolute; 
 
    bottom:0; 
 
    width:100%; 
 
    height:60px; /* Height of the footer */ 
 
    background:#6cf; 
 
} 
 

 
.clearfix:after { 
 
\t visibility: hidden; 
 
\t display: block; 
 
\t font-size: 0; 
 
\t content: " "; 
 
\t clear: both; 
 
\t height: 0; 
 
\t }

<div id="container"> 
 
    <div id="header"></div> 
 
    <div id="body"> 
 
     <div style="width:100%;min-height:500px;background-color:gray;clear:both;">IMAGES</div> 
 
     <div class="clearfix"> 
 
      <div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left;">First box of content</div> 
 
      <div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left;">Second box of content</div> 
 
     </div> 
 
    </div> 
 
    <div id="footer">FOOTER</div> 
 
</div>

источник

2015-06-17 11:35:37 Roi

Великий, спасибо много, он отлично работает в настоящее время (в отношении рекомендаций, чтобы удалить абсолютную позицию, я не мог этого сделать, потому что если содержание был короче высоты страницы, затем нижний колонтитул не садился, но спасибо в любом случае) –

Это трудно определить/см вашу проблему widouth скрипку, но вы, вероятно, следует искать в CSS clearfix

Добавить класс CSS (clearfix) для контейнеров

.clearfix:after{ 
    content: ""; 
    display:table; 
    clear:both; 
}

больше информация и поддержка браузера кросс смотрите на этой теме What is a clearfix?

источник

2015-06-17 11:36:32

Я поставил ссылку на скрипку в моем вопросе, это http://jsfiddle.net/8o7t4wq9/1/ –

вы можете см. hov вы можете добавить clearfix в свой код http://jsfiddle.net/mzvaan/53h36Lht/ –

-1

Удалить position:absolute и bottom:0 от footer и добавить clear:both.

#footer { 
    width:100%; 
    height:60px; 
    background:#6cf; 
    clear:both; 
}

источник

2015-06-17 11:38:20 099

Нижний колонтитул внизу, где содержимое переполняет нижний колонтитул

ответ

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