Div Height:0Px Does Not Work

Div height:0px does not work?

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.

Div height 0px but with images inside?

You just need to add.

overflow:auto; to #landing-images.

So, Your CSS will be like,

#landing-images {
    width: 100%;
    height: auto;
    overflow:auto;
    margin-top: 10%;
    margin-bottom: 5%;
    border: solid 2px black;
}

Because floating the child element removes it from the document flow and the parent will collapse. By adding the overflow rule, the desired behavior is restored.

Why is the parent div height zero when it has floated children

Content that is floating does not influence the height of its container. The element contains no content that isn't floating (so nothing stops the height of the container being 0, as if it were empty).

Setting overflow: hidden on the container will avoid that by establishing a new block formatting context. See methods for containing floats for other techniques and containing floats for an explanation about why CSS was designed this way.

Div with height 0px so not showing background img

Apply a height and width to .home-inner and make sure that your url has quotations '' surrounding your image path. You can also customize the background-image using background properties.

.home-inner {
    height: 100vh;
    width: 100vw;
    background-image: url('../img/bg.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

Greetings from Canada!

Parent DIV height:0px but child element still shows

use overflow: hidden;

#cc{    max-height: 0px;    overflow: hidden;}

<ion-navbar text-center color="primary" (click)="toggle()"></ion-navbar>
<div #cc id="cc">  <p>Hello World!</p></div>

Div has no height even if it has content

See the Demo here . Just add overflow: auto; to your main container.

#gallery {
    border: 1px solid;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
    height: auto;
    margin-top: 20px;
    padding: 15px;
    overflow: auto;
}

---

Related Topics