4

(動的な高さの) ヘッダーとフッターの位置が固定されている Web サイトを作成したいと考えています。コンテンツは、ヘッダーのすぐ下から開始する必要があります。簡単な例を作りました。(黄色と赤の上部の位置は同じです。黄色の DIV を赤の DIV の下から開始する必要があります。)

ヘッダー位置を固定に設定すると、コンテンツ DIV はヘッダーの同じ上部位置に配置されます。

たとえば、float を使用する場合、clear: both を使用して位置をリセットできますが、position: fixed の可能性もありますか?

4

6 に答える 6

3

私はこれが古い投稿であることを知っていますが、最近この問題に自分自身で遭遇しました。だから私は自分のソリューションを共有しようと思っただけです（まだ完全にはテストしていませんが、ここに免責事項を追加してください）。

同じ設定、クラスなど、コンテンツを使用して、固定コンテナ（ページの上部）の下に別のコンテナ（div）を作成しました。

次に、この2番目のdivをposition：static、visibility：hiddenにリセットするスタイルを追加しました。固定divで完全にカバーされているため、実際に非表示にする必要はありません。ただし、position：fixedを認識しない古いブラウザの場合に備えて。

とにかく、これにより、コンテンツの上に常に正しい高さのバッファ領域が提供されます。欠点は、動的コンテンツがある場合、これはこの領域のページに2回含まれることですが、非表示のdivが適切な高さであることを確認するためにそのコンテンツが必要です。

完璧な解決策ではありませんが、JavaScriptを使用して...バーを思いつくことができます。

于 2012-12-07T04:49:24.000 に答える
1

CSS のみのソリューション

画面の上部でヘッダーが占めるスペースを埋めるために何らかの方法を使用します。

  • padding-top:
  • margin-top:
  • position:relative + top:

height次に、通常viewportの s とモバイルsで変更する別の CSS スタイル シートを用意しviewportます。

height(または、属性を動的に設定するための JavaScript ソリューションについては、以下を参照してください。)

HTML:

<html>
  <body>
    <div id="header">
      Header
    </div>
    <div id="wrapper">
      <p>First Row</p>
      <p>Next row</p>
      <p>...</p>
      <p>Last row</p>
    <div>
  </body>
</html>

CSS（通常版）：

#header {
  position:fixed;
  height:100px;
  width:100%;
  background-color:green;
  color:white;
}
#wrapper {
  position:relative;
  top:101px;
}

CSS（モバイル版）：

#header {
  height:50px;
}
#wrapper {
  top:51px;
}

JavaScript ソリューション

HTML (コピー＆ペースト可能) :

<head>
  <style>
    #header {
      position:fixed;
      height:100px; /* try different values here! */
      width:100%;
      background-color:green;
      color:white;
    }
    #wrapper {
      position:relative; /* look Mom no height! */
    }
  </style>
</head>
<html>
  <body>
    <div id="header">
      Header
    </div>
    <div id="wrapper">
      <p>First Row</p>
      <p>Next row</p>
      <p>...</p>
      <p>Last row</p>
    <div>
    <script language="javascript">
      document.getElementById('wrapper').style.top = String(document.getElementById("header").offsetHeight + 1);
    </script>
  </body>
</html>
于 2012-04-06T15:18:53.157 に答える
0 
    <body>

   <div style="background-color: red; position: fixed;width:100%;">This is a test with position set  to fixed</div>
  <div style="background-color: yellow; height: 1000px;">This is content that should  start beneath the fixed DIV</div>

    </body>
于 2012-04-06T17:10:20.757 に答える
0

1 つの div に z-index (css) を使用します。 z-index:-1; 他の z-index:1 の場合。

http://www.w3schools.com/cssref/pr_pos_z-index.asp

于 2012-04-06T15:11:01.330 に答える
0

あなたが望むのは、ヘッダーの高さに等しいマージントップを追加することだと思います。フッターに対応するため、margin-bottom についても同じ操作を行います。

于 2012-04-06T15:11:20.623 に答える
0

と を使用する必要がpadding-topありpadding-bottomます。あなたの例ではpadding-top: 25px;、スタイルに追加すると、上部の固定 div の下に表示されます。

ご存知のように、固定位置はブラウザーの同じ場所に表示され、スクロールしても移動しません。残りの「通常の」コンテンツは固定配置要素の影響を受けないため、パディングとマージンを使用してバッファ スペースを作成する必要があります。

于 2012-04-06T15:11:41.360 に答える