Html div 高度：0px 不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/950829/
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
Div height:0px does not work?
提问by nmdr
<div style="height:0px;max-height:0px">
</div>
Setting a div height to 0px does not seem to work.
将 div 高度设置为 0px 似乎不起作用。
The div expands to show its contents, how do we prevent this from happening?
div 展开以显示其内容，我们如何防止这种情况发生？
回答by Gabriel Hurley
If you reallywant to be sure it's gonna be have no height you could use something like this:
如果你真的想确定它没有高度，你可以使用这样的东西：
display: block;
line-height:0;
height: 0;
overflow: hidden;
If you're still having problems on IE, you could also add
如果您在 IE 上仍然遇到问题，您还可以添加
zoom: 1;
to it in a stylesheet targeted at IE with a conditional comment. That'll trigger the hasLayout property in IE.
在针对 IE 的样式表中添加条件注释。这将触发 IE 中的 hasLayout 属性。
And display:none isn't the same as setting it to zero height. Just look at the various clearfix solutions for a case where notremoving it from the flow is crucial.
并且 display:none 与将其设置为零高度不同。对于不将其从流程中删除至关重要的情况，请查看各种 clearfix 解决方案。
回答by Gumbo
Set overflow:hidden. Otherwise the content will expand the wrapping element.
设置overflow:hidden。否则内容将展开包装元素。
回答by Philippe Gerber
Try to also set line-height: 0;
尝试也设置 line-height: 0;
And if you want to hide your divcompletely, use display: none;
如果你想div完全隐藏你的，使用display: none;
回答by Roman
Try overflow:hidden
尝试溢出：隐藏
回答by Philippe Leybaert
You could try adding "overflow:hidden" to the style
您可以尝试在样式中添加“溢出：隐藏”
回答by John Bellone
Not quite sure what you're trying to do, out of context, but try this:
不太确定你要做什么，脱离上下文，但试试这个：
display:none;
overflow:hidden:
height:0;
line-height:0;
border:0;
margin:0;
回答by Eystein
You haven't said which browser you're using, but I'm assuming IE, as it's the only browser I know of which mistakes height for min-height . Like everyone else has already said, overflow:hidden;will work, or line-height: 0;, but you only need one of them.
你还没说你使用的浏览器，但我假设IE浏览器，因为它是我知道错误的唯一浏览器height 的min-height 。就像其他人已经说过的那样，overflow:hidden;可以工作，或者line-height: 0;，但您只需要其中之一。
Setting height: 0;will have allready triggered IEs hasLayout, so no need for zoom:1;in this case.
设置height: 0;将已经触发 IEs hasLayout，所以zoom:1;在这种情况下不需要。
回答by Digital angel
For me, on Windows 10, Firefox 58.0.1, it wouldn't hide completely unless using this:
对我来说，在 Windows 10、Firefox 58.0.1 上，除非使用它，否则它不会完全隐藏：
display: block !important;
line-height: 0 !important;
height: 0 !important;
overflow: hidden !important;
zoom: 1 !important;
padding: 0 !important;
margin-bottom: 0;
border: none;
回答by Rosy
#yiv1734505183 .yiv1734505183portrait{
display:none;
font-size:0;
max-height:0;
line-height:0;
padding:0;
overflow:hidden;
}
@media (min-width:481px){
#yiv1734505183 .yiv1734505183mobile-hide{
display:block;
overflow:visible;
width:auto !important;
max-height:inherit !important;
min-height:auto !important;
}
}
@media (min-width:481px){
#yiv1734505183 .yiv1734505183portrait{
display:none;
font-size:0;
line-height:0;
min-height:0;
overflow
回答by Eddy
This works for me:
这对我有用：
.zippy{
padding: 0;
height: 0;
overflow: hidden;
}
Thanks.
谢谢。
