0

私は現在、チャット Web サイトを設計しています。レイアウトは非常にシンプルになります。

画面全体を占めるすべてのメッセージを含む div が必要ですが、フォーム フィールドがメッセージを送信するために予約されている画面の下部にある 20 ピクセルが必要です。

HTML コードは次のようになります。

<div id="messages">
...
</div>
<input type="text" id="message" />

CSS3 を使用して、この種のレイアウトをどのようにレンダリングできますか?

4

1 に答える 1

1

この状況で絶対配置を使用することの何が問題なのかわかりません。

#messages {
    position: absolute;
    top: 0;
    bottom: 20px;
    left: 0;
    right: 0;
    overflow: auto;
}

#message {
    position: absolute;
    bottom: 0;
    height: 20px;
    left: 0;
    right: 0;
}

実際の例については、この jsFiddle を参照してください (2 つの要素の開始/終了場所を明確にするために色を追加しています)

于 2012-07-28T18:36:58.230 に答える