html - 流体および固定ヘッダー

Question

ヘッダーが固定された Web サイトを作成したいのですが、流動的なレイアウトにする必要があります。それを行う方法はありますか？もしそうなら、どのように？どんな助けでも大歓迎です。

Answer 1

HTML 上のスケルトンは次のようになります。

<div class="masterHeader">   
   THIS IS HEADER TEXT
   <br/>

   <span style="float: left;"> LEFT SPAN </span>
   <span style="float: right;"> RIGHT SPAN </span>
</div>

<div class="contentData">
</div>

スタイリングには次の CSS を使用します。

.masterHeader
{
    display: block;
    height: 80px;
    position: fixed;
    text-align: center;
    min-width: 700px;
    width: 100%;
}

.contentData
{
    float: left;
    margin-top: 100px;
    padding-bottom: 15px;
    padding-left: 2px;
    position: relative;
    width: 100%;
}

Answer 2

これは、CSS3 メディア クエリおよび/または HTML4 メディア属性で実行できます。デモンストレーションについては、 http: //affinitysearch.com を参照してください(ヒント: ブラウザ ウィンドウのサイズを変更してください)。

基本的な構文は次のとおりです。

プライマリ スタイルシート (モバイル用に作成):<link rel="stylesheet" href="/css/style.css">

600px 以上のスタイルシート:<link rel="stylesheet" media="only screen and (min-width:600px)" href="/css/600.css">

960px 以上のスタイルシート:<link rel="stylesheet" media="only screen and (min-width:960px)" href="/css/960.css">

この方法は、ほとんどのブラウザーと互換性があります。