html - 高度 :auto overrides all height styles

Question

我有一个包含两个部分的响应式页面。右侧部分的所有元素都应该是响应式的，所以我使用了:

#rightSection * {max-width:100%;height:auto}

但是，正如您在代码片段中看到的那样，任何其他高度样式都将被忽略。

我不想使用 !important 因为我有很多带有 html 代码的内联样式，所以我不想通过 CSS 强制样式。在 height:auto 之后还有其他设置高度的方法吗？

    #rightSection * {max-width:100%;height:auto}


    .mydiv {
    	width:534px;
    	height:37px;
    	box-sizing:border-box;
    }

<div id="rightSection">
  <div class="mydiv" style="background:#ff0000"></div>
</div>

That Red div is invisible because the height is igonred!

Answer 1

根据您的代码，无论发生什么都很好 CSS 表示 Cascading Style sheet 这意味着最后一条规则适用，并且适用于更具体的规则。因此，在您的情况下，第一条规则比第二条规则具有更高的特异性，因此正在应用 height:auto 。

有关 Specificity 的更多详细信息，请参阅链接.

因此，在您的代码中，您可以通过不同的方式使第二个 Angular 色更加具体，您将从上面的链接中了解这些方式。下面是一个这样的例子。

 #rightSection * {max-width:100%;height:auto}


    #rightSection div {
    	width:534px;
    	height:37px;
    	box-sizing:border-box;
    }

<div id="rightSection">
  <div class="mydiv" style="background:#ff0000"></div>
</div>

That Red div is invisible because the height is igonred!

编辑:正如@connexo 所指出的，我建议不要使用 Id 选择器 refer this有关原因的更多详细信息。

您可以改用 css 类，因为类有助于使您的代码更通用，例如

.outerDiv * {max-width:100%;height:auto}


    .outerDiv .mydiv{
    	width:534px;
    	height:37px;
    	box-sizing:border-box;
    }

<div class="outerDiv">
  <div class="mydiv" style="background:#ff0000"></div>
</div>

That Red div is visible now  as the rule is more specific.

希望对您有所帮助:)