asp.net で Web ページを作成しました。通常の画面で問題なく動作します。より広い画面で表示すると、横と下に空白がたくさんあります。すべての画面サイズにページを合わせるにはどうすればよいですか。以前の投稿で、幅を % で設定するのを見ました。しかし、うまくいきません。誰でもこれで私を助けることができますか? 前もって感謝します。
3 に答える
このcssコードをもっと具体的に試す必要があることに同意します。
body{
width:100%;
height:100%;
}
次に、固定パーセンテージの幅と高さを持つコンテナー DIV を作成して、ヘッダー、サイドバー、メイン コンテンツ、フッターなどの Web ページの一部を作成できます。
% アプローチは、正しく使用すれば最も実行可能なアプローチです。特定のヘルプを得るには、html/css/jsのjsfiddleを投稿してください。
いくつかのオプションがあります。
html または body タグを背景付きで幅 100% に設定します。次に、サイトの残りの部分のコンテナを、任意のピクセル サイズの最大幅に設定します。これにより、サイトが引き伸ばされて乱雑に見えるのを防ぐことができますが、空白スペースの問題は解決されます. このようなもの:
body {
background:#HEX url(images/2000pxwideimage.png);
width:100%;
}
#wrapper {
max-width:960px;
}
css3 メディア クエリを使用して、画面の幅に応じてサイトのレイアウトを調整できます。これの利点は、レイアウトを美的に維持しながら、より小さな画面サイズとより大きな画面サイズに対応できることです。これは、場合によっては大幅に異なる css を提供することを意味する場合があります。例として、水平方向のナビゲーションが考えられます。画面サイズが小さい場合は、使いやすさのために垂直方向のナビゲーションが必要になります。それは次のようになります。
@media (min-width:960px) {
/* Browser window must be at least 960px wide to get these rules */
}
@media (max-width:320px) {
/* Something similar to this would work for very small screens like phones */
}
top、right、bottom、および left の CSS プロパティを定義することで、ルート要素 (body タグから 1 つ下) の絶対配置を試すことができます。このようなもの:
#page{
positioning: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
次に、そのルート要素内に他の要素を配置します。