CSS отзыв нижнего колонтитула - скрыть и показать еще

Question

У меня есть нижний колонтитул CSS, а главный div - #footer.

У меня тогда есть еще один div под названием #small-footer который имеет display:none; в css.

У меня есть другая таблица стилей под названием responsive.css, в которой есть мои медиа-запросы.

В responsive.css я следующее:

@media screen and (max-width: 1024px) { 
    #footer { 
     display:none; 
    } 
    #footer-inner { 
     display:none; 
    } 
    #footer-top { 
     display:none; 
    } 
    #footer-left { 
     display:none; 
    } 
    #footer-middle { 
     display:none; 
    } 
    #footer-right { 
     display:none; 
    } 
    #footer-bottom { 
     display:none; 
    } 
    #small-footer { 
     display:block; 
    } 
} 

так он скрывает весь код колонтитула, когда размер экрана становится меньше, но по какой-то причине # малого сноска ДИВ не появляется.

любые идеи, что это может быть?

Я создал скрипку здесь: http://jsfiddle.net/Er7vy/

Answer 1

Вы поставили ваш #small-footer в вашей #footer так как сноска не дисплей нет, все внутри будет скрыто (в том числе малого сноске)

http://jsfiddle.net/Er7vy/1/

Answer 2

Вы

footer-inner { 
    display:none; 
} 

Это означает, что что ничего в этом div не появится, а # small-footer div находится в этом div.

Answer 3

Попробуйте использовать min-width, чтобы показать свой большой нижний колонтитул, и скрыть мелкие. Это делает маленький нижний нижний колонтитул видимым для всех размеров экрана, пока вы не достигнете большей точки останова. И перемещение #small-footer из #footer-inner. Таким образом, всегда видна #footer.

#small-footer { display:block } 
#footer-inner { display:none; } 

@media screen and (min-width: 1024px) { 
    #footer-inner { display:block; } 
    #small-footer { display:none; } 
} 

<div id="footer"> 
    <div id="footer-inner">...</div> 
    <div id="small-footer">...</div> 
</div> 

Этот подход также экономит вам все избыточные display:none S, что вы в настоящее время используете. Меньше кода - лучший код: - \