0

response2テーマを使用するWordpressサイトがhttp://cmagics.eu/digitalmagazinepublishingにあります。正常に機能しているように見えるスティッキーヘッダーを取得しようとしていますが、ページの下部に貼り付けてhttp://ryanfait.com/sticky-のように機能するスティッキーフッターも取得しようとしています。フッター/

response2テーマのやや不可解な性質のため、どうすればよいですか。

1。position：fixedではなく、正しいスティッキーメソッドを使用してフッターをページの下部に固定します。

2。ページに十分なスペースがあるときに、メインコンテンツの不必要なスクロールを停止しますか？

htmlソース：

ビューソース：http ：//cmagics.eu/digitalmagazinepublishing/

css

#footer {
    position: relative;
    clear:both;
    font-size: 11px;
    line-height: 1.5em;
    background: rgb(54, 53, 53);
    color: #fff;
    border-top: 2px solid #444;
    text-align:center;
    margin-top: -324px; **just a hack to make the footer appear at the bottom incorrectly**
    margin-bottom: -25px;
    height: 162px;
    font-family: Roboto Regular;
}

#site-container {
    width: 900px;
    margin: 130px auto 0 auto;
    overflow:auto;
    padding-bottom:162px;

}

.hfeed {
min-height:100%;
    height:100%;
    height: auto;

}
4

2 に答える 2

1

これは私が非常にきれいだと思う解決策です。すべてのメイン コンテンツ要素 (ヘッダー、記事、フッター) に絶対配置を使用します。さまざまな画面幅 (レスポンシブ デザイン) に合わせてヘッダーまたはフッターの高さを変更する必要がある場合は、@media クエリを使用してさまざまな解像度でブレークを作成し、メイン コンテンツ領域にオーバーフローを非表示にするように指示します。この方法で、メイン コンテンツ エリア内でフローティングの相対レイアウトを使用することもできます。

于 2013-12-01T21:42:24.530 に答える
0

これがフッターCSSです:-

#footer {
         position: fixed;
         font-size: 11px;
         line-height: 1.5em;
         background: rgb(54, 53, 53);
         color: #fff;
         border-top: 2px solid #444;
         text-align: center;
         margin-top: -324px;
         margin-bottom: -25px;
         height: 162px;
         font-family: Roboto Regular;
         bottom: 0;
        width: 100%;
      }
于 2013-01-30T07:10:44.940 に答える