почему липкий нижний колонтитул перекрывает верхний контент при изменении размера - PullRequest
Новая
       13

почему липкий нижний колонтитул перекрывает верхний контент при изменении размера

3 голосов
/ 20 августа 2011

Вот HTML 

<div id = "wrapper" class = "selfclear">
    <div id = "contentDiv" class = "selfclear"> 
    </div> <!-- End contentDiv --> 
</div> 

<div id = "footerDiv" class = "selfclear"> 
</div> <!-- End footerDiv -->

Вот CSS: 

    *
 {
    margin: 0; 
    padding: 0; 
    border: 0;
}  

.selfclear:after 
{
    content:                ".";  
    float:                  left;
    display:                block;
    height:                 0;  
    clear:                  both;   
    visibility:             hidden;
}  

html, body
{
    height:                 100%; 
}  

#wrapper   
{ 
    width:                  100%;
    min-height:             100%; 
    background:             url( "../images/landing_page_bg.png" );
}  

#contentDiv
{  
    padding-bottom:         340px;
    overflow:               auto;
    border:                 1px solid green;
    width:                  1000px;
    margin-left:            auto;
    margin-right:           auto; 
    height:                 500px; 
} 

#footerDiv
{
    position:               relative;
    width:                  99.9%;
    clear:                  both;     
    height:                 340px;
    margin-top:             -340px;
    border:                 1px solid green;
    background:             url( "../images/landing_page_footer.png" )no-repeat;
    background-size:        100%; 
}

в основном при увеличении / уменьшении в браузере липкий нижний колонтитул перекрывает верхний контент, почему, икак остановить это, спасибо.

Вот код в рабочей среде.

http://jsfiddle.net/9X753/

Ответы [ 2 ]

2 голосов
/ 21 августа 2011

Вы не можете сказать, что ваш нижний колонтитул "липкий" в этом случае. Я предлагаю вам прочитать этот учебник: http://www.alistapart.com/articles/footers/

Я использую этот метод, и он отлично работает.

0 голосов
/ 21 августа 2011

Посмотрев на ваш код, он напомнил мне учебник ... после 2-минутного поиска вот оно:

http: //www.cssstickyfooter.com/using-sticky-footer-code.html

По структуре вашего HTML это так, как вы хотите:)

Надеюсь, это поможет!

...