0

ロゴの高さに応じてラッパーの高さを拡張したいという問題があります。Google にはこのような質問がたくさんあることは知っていますが、実際にはどれもうまくいきませんでした。

height: auto !important メソッドを試しました。

min-height も試してみましたが、ほとんどの場合は機能しますが、高さを auto にすると機能しません。

これが私のCSSです：

.header {  
width: 100%; 
height: auto;
min-height: 80px; 
position: relative;
background: red; }

.logo { float: left; border: 0; }

HTML:

<div class="header">
  <img src="logo.png" class="logo"/>
  <br class="clear" />
</div>

フロートなしでも試してみたことに注意してください。この質問が簡単に解決できる場合は、事前にお詫び申し上げます。私は調査を行いましたが、どれもうまくいきませんでした。助けていただければ幸いです。ありがとうございました ！

4

2 に答える 2

3

ロゴはfloat：leftであるため、いわゆるclearfixを使用する必要があります。高さまたは最小の高さでの操作はすべて、間違った方法です。クリアフィックスには多くの種類があります。を持っているので、スタイルシート<br class="clear" />に追加する必要があり.clear { clear: both; }ますが、これは最善の方法ではありません。これがより良いものです：

CSS：

.header {  
    width: 100%; 
    background: red; 
}

.logo { 
    float: left;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

http://www.webtoolkit.info/css-clearfix.html

HTML：

<div class="header clearfix">
  <img src="logo.png" class="logo" />
</div>

ここで実際の例を見ることができます：http：//jsfiddle.net/ZCXVr/1/ ヘッダーを与えるPSoverflow: hiddenも方法ですが、私はそれを使用することをお勧めしません

于 2012-12-28T00:23:40.080 に答える
2

ヘッダーを与えてみてくださいoverflow: hidden

于 2012-12-27T21:18:05.880 に答える