0

私は現在、960 グリッド システムを使用して Web サイトのデザインに取り組んでおり、デザインの最終段階で小さな障害に遭遇しました。最終的に、ヘッダーとフッターのバーをページ上で「固定」に設定して、ページの残りの部分がスクロールしている場合でも静止したままにしたいだけです。これは、固定ナビゲーション バーの優れた例です。 http://ryanscherf.net/ 私のは垂直ではありませんが、要点はわかります。

私が直面している問題は、ヘッダーが完全に機能することです。ここに私のヘッダーのHTMLがあります

<div id="header">
    <p>
        ATS Logo
    </p>
</div><!--end header-->

そしてそれを伸ばして位置を固定するCSS

 #header
{
background:grey;
width:100%;
height:65px;
position:fixed
/*padding:15px;*/
}

このソリューションは、私が望むとおりに機能します。ただし、まったく同じ設定をフッターに適用すると、望ましくない結果が生じます。ここに私が何を意味するかを示すためのフィドルがあります。フッターの「position:fixed」行のコメントを外して、私の意味を確認する必要があります。 http://jsfiddle.net/s4cWP/ およびフルスクリーン http://jsfiddle.net/s4cWP/embedded/result/

独自の css (jsFiddle の上部にあります!) を使用することに加えて、960 リセット グリッドと 960 12 列スタイル シートを使用していることに注意してください。

正しい方向へのプッシュを本当に感謝します。ここで説明していない何かがありますか？

ありがとう！

4

1 に答える 1

1

フッターを常にヘッダーのように表示する必要があると想定しています: JSFiddle。

新しい #footer:

#footer
{
    background:grey;
    width:100%;
    position:fixed;
    bottom:0;
    left:0;
}

また、オーバーラップのため、#container の下部にパディングを追加しました。

#container
{
    padding-top:75px;
    padding-bottom:30px;
}
于 2013-03-02T17:17:18.297 に答える