Question

我遇到了一个问题，我想根据徽标的高度来扩展包装的高度。我知道谷歌有很多问题，但是没有一个问题对我有效。

我尝试了高度：auto！important方法。

我也尝试了min-height，它在大多数情况下有效，但是当我将高度设置为自动时它对我不起作用。

这是我的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>

请注意我在没有浮动的情况下尝试过它。如果这个问题很容易解决，我会提前道歉。我做了我的研究，其中没有一个为我或任何我找到的人在我的情况下工作。我将不胜感激。谢谢！

Answer 1

由于您的徽标是浮动的：左侧，您需要使用所谓的clearfix，所有具有高度或最小高度的操作都是错误的方式。有很多种类型的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/ 附：给标题overflow: hidden也是一种方法，但我不建议使用它

Answer 2

尝试提供标题overflow: hidden

如何根据徽标的高度扩展高度自动包装

2 个答案: