0

CSS フッターがあり、メインの div は#footer.

次に、css に#small-footerある別の div を呼び出します。display:none;

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;
    }
}

そのため、画面サイズが小さくなるとすべてのフッター コードが非表示になりますが、何らかの理由で #small-footer div が表示されません。

これは何でしょうか？

ここでフィドルを作成しました: http://jsfiddle.net/Er7vy/

4

3 に答える 3

2

フッターが表示され#small-footerない#footerため、その中のすべてが非表示になります（小さなフッターを含む）

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

于 2013-05-17T13:15:39.420 に答える
0

あなたが持っている

footer-inner {
    display:none;
}

つまり、その div には何も表示されず、#small-footer div はその div に含まれます。

于 2013-05-17T13:16:35.950 に答える
0

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このアプローチにより、現在使用しているすべての冗長な も節約できます。少ないコードが最良のコードです:-\

于 2013-05-17T13:17:01.990 に答える