2

これがクロムの問題にすぎないかどうかは実際にはわかりませんが、このページ全体を、相対的に配置されたコンテナ内に絶対配置された要素で設定しました。通常、私はこれを行いませんが、画像を回転させる必要があったため、css の background プロパティを使用できませんでした。

とにかく、何らかの理由で、フッターを絶対に下の位置に配置すると: 0; 右: 0; それは現れません。

HTML:

<div id="wrapper">
  <div id="content">
  </div>
  <div id="footer">
    <ul>
    </ul>
  </div>
</div>

CSS:

#wrapper {
  position: relative;
  margin: 0 auto;
  width: 940px;
}

#content {
  position: absolute;
  top: 0;
  left: 0;
  height: 350px;
}

#footer {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
}

編集: ラッパーの高さを設定することはできません。これは wordpress サイトになり、ユーザーが大量のテキストを入力できるためです。ただし、フッターの高さを設定することはできます。

4

3 に答える 3

3

高さを設定できない場合は、ラッパーからフッターを削除して、親がないようにしてください。絶対位置の高さは、その親から決定されます。親の「ラッパー」には高さがありません。したがって、底に浮きません。

幸い体は底に沈みます。

ここにjsFiddlesのコードがあります

        #wrapper {
      position: relative;
      margin: 0 auto;
      width: 940px;

    }

    #content {
          background:#ccc; 
      position: absolute;
      top: 0;
      left: 0;
      height: 350px;

    }

    #footer {
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 10;
        background:papayawhip;
    }​



    <div id="wrapper">
  <div id="content">
      sdfasdf
  </div>

</div>
 <div id="footer">
    <ul>
        <li>aslfaskdjf</li>
    </ul>
  </div>
​
于 2012-04-24T16:15:02.557 に答える
2

の高さは#wrapper表示されますが、その高さ....ここを参照してください。右側の赤い境界線であることがわかります0px#footer0px#footer

高さを指定し#wrapperて高さを適用すると、#footer それを見ることができます。または、フッターをコンテンツと同じ高さにするには、高さプロパティを削除します

于 2012-04-24T15:54:41.063 に答える
1

実際にはコードより上ですが、＃wrapperには相対的な位置があり、＃footerは#wrapper内にあります。#footerの位置は、ラッパーに従って配置されます。ラッパーに高さを指定すると、それを確認できます。以下を参照してください。

HTML：

<div id="wrapper">
  <div id="content">
  </div>
  <div id="footer">
    <ul>
your_content
    </ul>
  </div>
</div>

CSS：

#wrapper {
  position: relative;
  margin: 0 auto;
  height: 200px;
  width: 940px;
}

#content {
  position: absolute;
  top: 0;
  left: 0;
  height: 350px;
}

#footer {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
}

ここで例を見ることができますhttp://jsfiddle.net/8DZ5R/

これを解決する別の方法は、「＃footer」の位置を「absolute」から「static」に変更するだけです。ラッパーの高さを変更する必要はありません。http ： //jsfiddle.net/8DZ5R/1/を参照してください。

于 2012-04-24T16:00:58.977 に答える