Ashburn, February 22, 2018

How to make div height 100 percent of parent

How to make div height 100 percent of parent

How to make div height 100 percent of parent

If you would like to make div height 100 percent of parent all you have to do is adding 2 lines to the CSS code:

For the parent:

display: flex;

For childs:

align-items: stretch;

So for example is I have a set of divs like this:

some text and some more text
some text and some more text and some more text and some more text

Then CSS code would be like:

.my_parent{
    display: flex;
    width:50%;
}
.my_child{
    align-items: stretch;
    width:50%;
}

And you would get something like this:

some text and some more text
some text and some more text and some more text and some more text and some more text and some more text

This approach works like a charm. This is the correct solution for this issue as of 2016.

I hope you found it useful an enjoyed it.

Any question? Feel free to contact me!

Cheers!

About Karlos Maldonado 41 Articles
Computer Sciences Engineer graduated from Florida Atlantic University (FAU) in Boca Raton, Florida. Has gotten great experience in the IT and Web Development industry working for companies such as SIRIUS XM RADIO, 4MEDIA as well as collaborating with local companies.

Be the first to comment

Leave a Reply

Your email address will not be published.