1

次のような単純なレイアウトを作成しようとしています。

ヘッダ

内容（画像はこちら）

フッター

私が達成しようとしているのは、コンテンツ div 内に画像を配置し、ビューアのブラウザ サイズに基づいてサイズを大きくしたり小さくしたりすることです。

この部分は達成できますが、フッターを常にブラウザーの下部に残し、オーバーフローを発生させずにコンテンツ div の画像のサイズを変更したいと考えています。

これが私がやろうとしていることの例です: http://www.modernart.net/view.html?id=1,3,9

このコードを複製しようとしましたが、機能させることができません。誰でもこれを行うように提案できる方法はありますか? これまでのところうまくいかなかったので、私は非常に役に立ちます。

前もってありがとう、タカシ

4

2 に答える 2

0

あなたは本当に物事をやろうとし、あなたの過ちから学ぶべきです. それにもかかわらず、ここにあなたが求めているレイアウトがあります：

この 実用的なフィドルの例を参照してください!

HTML

<div id="header">My Beautiful website!</div>
<div id="content">
  <a href="#" title="">
    <img src="http://i328.photobucket.com/albums/l330/slowwkidd3923/backflip.jpg" alt="ups...">
  </a>
</div>
<div id="footer">
  This is the footer text!
</div>

CSS

/* basics */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* header */
#header {
    position: absolute;
    z-index:1;
    top: 10px;
    left: 10px;
}

/* content */
#content {
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    bottom: 20px;
    text-align: center;
}
#content img {
    height: 96%;
}

/* footer */
#footer {
    position:absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    text-align: left;
    height: 20px;
    line-height: 20px;
}

CSS の学習に役立つリンク:

カスケード スタイル シート

カスケード スタイル シート レベル 2 リビジョン 1 (CSS 2.1) 仕様

MDN :: CSS - リファレンス、チュートリアル、デモ

于 2012-06-07T21:44:07.310 に答える
0

css でパーセンテージを使用すると解決策になる可能性があります: http://jsfiddle.net/rgv2e/

于 2012-06-07T21:03:42.653 に答える