6

上部にヘッダー、下部にフッター、右側にサイド カラムを配置する Web ページをコーディングしています。ページの下部にフッターを配置するのに問題があります。position: fixed にはしたくありませんが (面倒です)、一番下までスクロールしたときにページの一番下に表示されるようにしたいです。(スクロールが不要な場合は、ウィンドウの下部に表示されます)

これが私が使用しているものです。おそらくかなり簡単な修正があるでしょうが、それが何であるかわかりません。これをコピー＆ペーストすると表示されます。

<html>
  <head>
    <style type="text/css">
      body {
        font-size: 200%;
      }

      #side {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: #0A0;
        z-index: 100;
      }

      #header {
        height: 40px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: #A00;
        z-index: 200;
      }

      #header_push {
        clear: both;
        height: 40px;
      }

      #footer {
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #00A;
        z-index: 150;
      }

      #footer_push {
        clear: both;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div id="header">
      HEADER
    </div>
    <div id="header_push"></div>
    <div id="content">
      <h1>Content</h1>
      <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p>
    </div>
    <div id="side">
      SIDE COLUMN
    </div>
    <div id="footer_push"></div>
    <div id="footer">
      FOOTER
    </div>
  </body>

正しく動作:

正常に動作

下にスクロールすると正しく動作しません (ページの横にあるスクロールバーを参照):

スクロールで正しく動作しない

4

4 に答える 4

3

これを行う方法の例については、私のコメントを参照してください。

しかし、あなたの状況ではposition:relative、体を着るだけです。

JSビン

それらのabsolute位置フッターはrelative配置された親にあり、そのスペースを使用するため、bottom:0配置するとフッターがその _parent の下部に配置されます。

位置が異なる要素の例

于 2013-07-27T20:31:56.390 に答える
0

ちょっと私はあなたのコードを使ってフィドルを作りました。私が理解していることから、これがあなたが探しているものです。これが役立つかどうか教えてください。

行われた変更: CSS

#footer {
    height: 50px;
    background-color: #00A;
    z-index: 150;
  }

フィドルへのリンク: http://jsfiddle.net/daltonpereira/q7Dqg/

于 2013-07-27T20:21:16.627 に答える