css - css webappウィンドウのサイズ変更により、divがウィンドウに対して大きくなりすぎます

Question

コードのリンクを参照してください...

このコードを使用すると、ページはサイズ変更時にも適切な幅を提供します。ただし、高さはjQueryで調整する必要があります。これにより、高さが必要な100％より少し多く、ページの高さをサイズ変更しても変化しないdivが得られます...

Here is the code: http://jsfiddle.net/T6Uv4/

Answer 1

私はこの振る舞いを説明しようとします：

画面の解像度が 1000px の場合 (例のみ)、80% は 800px です。しかし、ページの幅を 500px に変更すると、80% が 400px に収まりました。これらの 400px + 210px マージン = 610px (500px ではありません!)

解決策: leftmarginと yourpaddingをポーセンチュアル値または em 単位で入力して、コンテンツ内で余白のサイズを変更してみてください。

ここにフィドルがあります。

画面のサイズを大きく変更すると、スクロールバーが再び表示されることに注意してください。境界線をem単位に変更して修正できます。完璧な解決策は、ページ全体に固定値を設定しないことに出くわしました。

より複雑なサイズ調整については、Mediaqueriesを使用できます