0

すべての画面で同じように表示したいWebページのレイアウトを作成しています。私が作業しているページには、ヘッダー、メイン、フッターの3つの部分があり、画面の上部にヘッダーを配置します。メインとフッターはページの下部に貼り付けられます。

これが私がやりたいことです：

  1. ヘッダーを上部に作成しましたが、メインセクションとフッターセクションにパーセンテージを追加できませんでした。

  2. また、ヘッダーには「div5」と呼ばれるdivがあり、メインボックスまたはミドルボックスである親divの下部に固定する必要があります。

  3. フッターには、左、右、中央に配置したい3つのボックスがあります。

リンク先のサイトを見て、これらの問題を解決する方法を教えてください。

4

2 に答える 2

1

パーセンテージの高さは、親要素に高さを設定した場合にのみ機能します。

(要素は「何の割合ですか?」と尋ねます)

ここでは、本体に高さを設定します

CSS

<style type="text/css">

      html,body { height:100%;}

      #header { display:block; height:10%; }
      #main   { display:block; height:80%; }
      #footer { display:block; height:10%; }

</style>

マークアップ

   <body>
    <div id="header"></div>
    <div id="main"></div>
    <div id="footer"></div>
   </body>
于 2012-05-26T20:45:07.490 に答える
0

これらを行うことで、div 2,3 & 4 をオーバーラップさせます。それも大事にされていることを確認してください。はい、Css メディア クエリのオプションを検討する必要があります。こちらのデモをご覧ください

于 2012-05-26T22:39:04.390 に答える