0

私は CSS の専門家ではないので、明らかな何かを見落としている可能性があります。相対的なサイズのヘッダーとフッターを設定しようとしています (大きなモニターでは、小さな画面よりもヘッダーとフッターが大きくなるように)。これを行うために、パーセンテージの高さを使用しています。ただし、これは を に設定した場合にのみ機能positionしabsoluteます。問題は、absolute に設定すると、画面の主要部分 (ヘッダーとフッターの間) に重なってしまうことです。ヘッダー/フッター内にあるアイテムに依存しているため、相対に設定しても機能しません。これは私のヘッダーがどのように見えるかです:

.header
{
    position:absolute;
    top:0px;
    background-color:white;
    width:100%;

    height:30%;

}

ASPXページには単に含まれています

<div class="header"></div>

比較的比例したヘッダーとフッターを取得する方法はありますか?

ありがとう

4

2 に答える 2

1

パーセンテージの高さを使用するには、親の高さが固定されている必要があります。これは、親が高さ自動の場合、子コンテンツの高さに依存するためです。これは、親の高さなどに依存します。位置を設定すると、絶対的であるためには、固定サイズ（私による理論）を持つ親要素として画面ビューポートを取ります。これが絶対的で機能する理由です。

ブラウザの解像度に基づいて比例ヘッダーとフッターを試してみるのは良い考えではないと思います。正直なところ、ヘッダーにあるフォントサイズや画像を一致させるためにスケールアップおよびスケールダウンする必要があります。本当に必要な場合は、別のCSSを使用することをお勧めします。ユーザーが選択できる（またはjavascriptによって自動的に選択される）スタイルシート。このように、誰かが巨大な解像度を持っている場合、必要に応じてより大きな解像度を選択できます（または自動的に選択されます）。そうすれば、スケーリングの問題に対処する必要がありません。

于 2010-05-05T18:54:01.460 に答える
1

要素にパーセンテージの高さを持たせるには、HTML と BODY も定義された高さを持つように定義する必要があります。これが何かわからないので、100% を使用します。

html, body {
    height:100%;
}
于 2010-05-05T18:58:44.297 に答える