固定ヘッダー、スクロール可能な本体。どのようにテーブルなしで？

必要に応じて本文がスクロールする永続的なヘッダーを私のウェブサイトに実装したいと考えました。 Kinda Facebookのように。固定ヘッダー、スクロール可能な本体。どのようにテーブルなしで？

テーブルに関して多くの例があるので、テーブルなしでそれを行う方法があるかどうかを知りたいと思っていました。

2012-01-20 ASPiRE

この質問は何百回も前に尋ねられています。投稿する前にちょっと調べてください。 – srijan

重複：http://stackoverflow.com/questions/256811/how-do-you-create-non-scrolling-div-at-the-top-of-an-html-page-without-two-sets 多くの人が、自分自身を含めて、おそらくあなたにそれをしないと言ってくれるでしょう！ – ccpizza

私はそれがあると思います。今ではキーワード検索のためだけに、「スクロールバーを2つ設定しないで、HTMLページの上部に非スクロールdivを作成する方法は、私の信じられないほど素晴らしい検索エンジンではなく、それを発見した。 =） – ASPiRE

あなただけそうのように固定されるヘッダの位置を設定する必要があります。

#header{ 
    position:fixed; 
    top:0; left:0; 
    height:40px; 
    width:100%; 
    z-index:999; 
}

これは、ページの上部に固定され、あなたのヘッダーを維持し、あなたがページ本体をスクロールすることができます。

また、ヘッダーの高さによっては、コンテンツを開始するときに上部からパディングを追加することもできます。これにより、コンテンツが最初に読み込まれたときに、オーバーラップヘッダーでコンテンツがカバーされなくなります。

出典

2012-01-20 21:26:06

+1最後の段落：まさに私が探していたもの！ありがとう！ – 11684

表はまったく必要ありません。 divを100％幅、任意の高さにして、位置を指定すると、上と左の両方を0に固定することができます。

次に、CSSで他のコンテンツをプッシュダウンしてくださいそのヘッダーの下に

出典

2012-01-20 21:27:22 Kristian

あなたはz-indexでそれを押し下げますか？ – ASPiRE

パディングトップを使用して下に押します。 z-inexは、ヘッダーが常に上になるようにするために使用されます。要素のZ-インデックスが大きいほど、他の要素の上に（同じ積み重ね順序で）要素が表示されます。 –

申し訳ありませんが、私はより明確にすべきでした、ヘッダーと同じ高さのパディングトップで内容のdivsを押すことができます。ヘッダのZ-インデックスは、他のz-インデックスされたアイテムと重複することができない場合、より高い数に設定することができます。 – Kristian

固定ヘッダー、スクロール可能な本体。どのようにテーブルなしで？

答えて

関連する問題