Div height:0px does not work?

Viewed 69044
<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?

11 Answers

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.

Set overflow:hidden. Otherwise the content will expand the wrapping element.

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;

You could try adding "overflow:hidden" to the style

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.

Related