CODEWITHSUNDEEP
htmlcss
moosefetcher
moosefetcher

Reputation: 1901

Setting divs to 100% height when height: 100% doesn't work

I've seen a lot of examples here that claim just using...

height: 100%;

... should set the height of a div to the height of its container. That is not happening, so I realise there must be some other problem; I'd like to know what that problem is.

My aim is to have the nested image displayed at the same height of the .container div, ideally stretching to fit height-wise and width-wise.

At the moment, at some resolutions, the image does not occupy the full height of the .container div which means the p elements can overspill.

And I realise it might look like I should just set a background image for the .container div (something I've already tried) but, due to the way our AngularJS engine is set up, the url value for background-image gets broken so that is not an option.

#container {
    	background-color: transparent;
    	border-radius: 0px 0px 0px 0px;
    	font-size: 0.8em;
    	font-family: Courier;
    	padding: 0px;
    	overflow: hidden;
    	margin: 40px 0px;
    	height: 100%;
    	width: 100%;
    	border: solid 4px green;
    }
    #container > div:first-child {
    	display: block;
    	border: solid 2px red;
    	height: 100%;
    }
    #container > div:first-child > div {
    	display: block;
    	height: 100%;
    }
    #container > div:first-child > div > img {
    	position: absolute;
    	z-index: 1;
    	margin: 0px;
    }
    #container p {
    	margin: 20px 40px 20px 40px;
	position: relative;
	z-index: 2;
    }
<div id="container">
        <div>
            <div>
                <img src="path/to/image.png"/>
            </div>
        </div>
        <div>
            <div>
                <p>Correctly displaying text here.</p>
            </div>
        </div>
        <div>
            <div>
                <p>More correctly displaying text here.</p>
            </div>
        </div>
    </div>

I have since tried various things, including setting min-height or max-height to 100% on all the divs (which also did not work)

I have added the border colours to establish that the height of the div is, indeed NOT 100% of the height of its container. When I set it to an explicit pixel height, it displays at that height - but I want it to be responsive, so 100% height would work nicely if it would work. I've also tried changing the display properties of the various divs, but 'inline' or 'inline-block' just made the border collapse to the left side with what looked like a 'line-height's height.

Any pointers as to what's going on here? Surely setting something to actually be 100% the height of its container should be simple? Thanks.

EDIT I should have pointed out that I (think I) need the image to be positioned absolutely so that the text elements appear over the image. This is all an elaborate alternative to not being able to simply use background-image, as detailed above. Thanks again.

Upvotes: 0

Views: 92

Answers (1)

Adel Elkhodary
Adel Elkhodary

Reputation: 1647

What i see about your coding is :

1 - container should have position relative if you want to have the first div with the red border with full height that can be overlapping the container you have to make the first div position absolute and i provided here jsfiddle with an exmaple of your case the the img inside the div should take height 100%; and width 100%; from the parent and you can use object-fit: cover; to have it same height and width respecting the ratio of your container

https://jsfiddle.net/Letwug7t/

#container {
    background-color: transparent;
    border-radius: 0px 0px 0px 0px;
    font-size: 0.8em;
    font-family: Courier;
    padding: 0px;
/*     overflow: hidden; */
    margin: 40px 0px;
    height: 100%;
    width: 100%;
    border: solid 4px green;
    position: relative;
}
#container > div:first-child {
    display: block;
    border: solid 2px red;
    height: 100%;
    width: 100%;
    position: absolute;
}
#container > div:first-child > div {
    display: block;
    height: 100%;
}
#container > div:first-child > div > img {
    position: absolute;
    z-index: 1;
    margin: 0px;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
#container p {
    margin: 20px 40px 20px 40px;
position: relative;
z-index: 2;
}
<div id="container">
    <div>
        <div>
            <img src="http://placehold.it/300x300"/>
        </div>
    </div>
    <div>
        <div>
            <p>Correctly displaying text here.</p>
        </div>
    </div>
    <div>
        <div>
            <p>More correctly displaying text here.</p>
        </div>
    </div>
</div>

Upvotes: 3

Related Questions