このレスポンシブデザインで私を助けてください。
これは私のHTMLレイアウトです:
<body>
<div id="container">
<div id="wrapper">
<div id="images">
<div id="cats">
<img src="cat-image-1.png" />
<img src="cat-image-2.png" />
</div>
<div id="dogs" style="display: none;">
<img src="dog-image-1.png" />
<img src="dog-image-2.png" />
</div>
</div>
<div id="chat_wrapper">
<div id="chat_messages">
Chat messages in here
</div>
<div id="chat_input">
<input type="text" value="Type to chat" />
</div>
</div>
</div>
</div>
</body>
次に、CSS が何をすべきかを説明しましょう。
#wrapper には div #images と div #chat_wrapper があります。
#images の div #cats と #dogs には不明な数の画像があります (= 高さは不明です)。
#chat_wrapper は常に画面全体を埋めようとする必要がありますが、div #cats または #dogs が表示されている場合は、 #chat_wrapper を折りたたんで、ドキュメント要素の高さがウィンドウの高さより大きくならないようにする必要があります。(min-height は少なくとも 400px にする必要があるため、#dogs がウィンドウの高さの 100% を占めるとしたら、チャットまでスクロールできるはずです。
CSSのみで可能かどうかわかりませんが、助けてもらえますか? :)
どうもありがとう！
スクリーンショット #1:
#dogs が表示され、#chat_wrapper が残りのスペースを埋めます。#chat_messages div をスクロールするだけです (#chat_input は移動しません)。
スクリーンショット #2:
チャットだけが表示され、#chat_messages div をスクロールできます (#chat_input は移動しません)
スクリーンショット #3:
#dogs はいくつかの画像で表示されます。ウィンドウ全体をスクロールできます。チャットは 400px の高さです。#chat_messages div をスクロールできます (ウィンドウ全体をスクロールすると、#chat_input が移動するだけです)。