<div style="height:0px;max-height:0px">
</div>
Setting a div height to 0px does not seem to work.
The div expands to show its contents, how do we prevent this from happening?
<div style="height:0px;max-height:0px">
</div>
Setting a div height to 0px does not seem to work.
The div expands to show its contents, how do we prevent this from happening?
If you really want 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
zoom: 1;
to it in a stylesheet targeted at IE with a conditional comment. That'll trigger the hasLayout property in IE.
And display:none isn't the same as setting it to zero height. Just look at the various clearfix solutions for a case where not removing it from the flow is crucial.
Try to also set line-height: 0;
And if you want to hide your div completely, use display: none;
For me, on Windows 10, Firefox 58.0.1, it wouldn't hide completely unless using this:
display: block !important;
line-height: 0 !important;
height: 0 !important;
overflow: hidden !important;
zoom: 1 !important;
padding: 0 !important;
margin-bottom: 0;
border: none;
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;
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.
Setting height: 0; will have allready triggered IEs hasLayout, so no need for zoom:1; in this case.
The other answers cover this well. Just want to add that if you have tried everything else and the <div> still is visible, then there may be a min-height: that is the culprit.