CSS 如何取消设置最大高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13988145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to unset max-height?
提问by BiAiB
How to I reset the max-heightproperty to its default, if it has been previously set in some CSS rule? This doesn't work:
max-height如果先前已在某些 CSS 规则中设置该属性，如何将其重置为默认值？这不起作用：
pre {
max-height: 250px;
}
pre.doNotLimitHeight {
max-height: auto; // Doesn't work at least in Chrome
}
回答by Madara's Ghost
回答by mr_lewjam
You can clear the max-height attribute by using the following css:
您可以使用以下 css 清除 max-height 属性：
max-height:none;
回答by Jexah
Just a note, if you're using JavaScript to style the element like $el.style.maxHeight = '50px';using $el.style.maxHeight = 'none';will not "reset" or "remove" the 50px, it will simply override it. This means that if you try to "reset" the max height of an element using $el.style.maxHeight = 'none';it will apply the nonevalue to the max-heightproperty of the element, overriding any other valid max-heightproperties in CSS selection rules that match that element.
请注意，如果您使用 JavaScript 来设置元素的样式，例如$el.style.maxHeight = '50px';using$el.style.maxHeight = 'none';不会“重置”或“删除” 50px，它只会覆盖它。这意味着如果您尝试使用$el.style.maxHeight = 'none';它“重置”元素的最大高度，则会将该none值应用于max-height元素的属性，覆盖max-heightCSS 选择规则中与该元素匹配的任何其他有效属性。
An example:
一个例子：
styles.css
样式文件
.set-max-height { max-height: 50px; }
main.js
主文件
document.querySelectorAll('.set-max-height').forEach($el => {
if($el.hasAttribute('data-hidden')){
$el.style.maxHeight = '0px'; // Set max-height to 0px.
} else {
$el.style.maxHeight = 'none'; // 'Unset' max-height according to accepted answer.
});
To actually "unset" an inline style, you should use $el.style.removeProperty('max-height');.
要真正“取消设置”内联样式，您应该使用$el.style.removeProperty('max-height');.
To complete this for an entire style rule and not just a single element, you should first find the rule you want to modify, and then call the removePropertyfunction on that rule:
要为整个样式规则而不是单个元素完成此操作，您应该首先找到要修改的规则，然后removeProperty在该规则上调用函数：
for(let i = 0; i < document.styleSheets[0].cssRules.length; ++i){
if(document.styleSheets[0].cssRules[i].selectorText == '.set-max-height'){
document.styleSheets[0].cssRules[i].style.removeProperty('max-height');
break;
}
}
You can find the StyleSheetand CssRuleobjects however you want, but for a simple application I'm sure the above would suffice.
您可以根据需要找到StyleSheet和CssRule对象，但对于一个简单的应用程序，我相信以上内容就足够了。
Sorry for putting this as an answer, but I don't have 50 rep so I can't comment.
很抱歉将其作为答案，但我没有 50 名代表，因此无法发表评论。
Cheers.
干杯。
回答by Avadhut Thorat
You can use
您可以使用
max-height: unset;
which resets a property to its inherited value if you are inheriting from its parent (will work as keyword inherit) and in case you are not inheriting it will resets to its initial value ( will work as keyword initial).
如果您从其父级继承（将用作关键字继承），则将属性重置为其继承的值，如果您不继承，它将重置为其初始值（将用作关键字初始值）。
回答by thiagowfx
Use either
使用任一
max-height: none;
or
或者
max-height: 100%;
Note: the second one is relative to the height of the containing block.
注意：第二个是相对于包含块的高度。
