2

画面のサイズを基準にして高さを設定しようとしていますが（高さ= 12％）、特定のピクセルの高さ（つまり、最大高さ：150px）を超えないようにします。このための適切なcssは何ですか。私が試してみました：

.titleBar {
    position: relative; 
    background-color: #5C755E; 
    padding: 1%; 
    height: 12%; 
    max-height: 100px; 
    border-bottom: .45em solid #DEB887; 
    top:0; 
    left:0; 
    width: 100%;
}

ただし、これはmax-heightプロパティを無視します。私の大きなデスクトップ画面では、タイトルバーは200pxになります（大きすぎます）。

4

2 に答える 2

3

高さの代わりに最小の高さを使用する必要があります。自動に設定されていない限り、高さは最小および最大の高さをオーバーライドします。高さと最小の高さの組み合わせ（height：autoを除く）は、最小/最大の高さを無視します。

これは機能するはずです。

.titleBar {
    position: relative; 
    background-color: #5C755E; 
    padding: 1%; 
    min-height: 12%; 
    max-height: 100px; 
    border-bottom: .45em solid #DEB887; 
    top:0; 
    left:0; 
    width: 100%;
}
于 2012-12-29T09:28:24.337 に答える
1

親要素がある場合は、親要素に高さを追加する必要があります。したがって、432pxの親要素に高さを追加すると、divは36pxの高さになります。

また、いくつかのメモ。

  • emsまたはpixelsのいずれかを使用することを選択する必要があります。両方を使用しないでください。
  • プロパティborder-boxを要素に追加すると、幅はページの100％ではなくページの100％として表示され、次にパディングを追加するため、わずかに大きくなります。
  • 最小の高さも追加することをお勧めします。

お役に立てれば！

于 2012-12-29T07:10:44.240 に答える