Expanding a child div to a fluid parent height

Hi Guys, I have been trying to work out a solution that forces a child div to expand to the full height of its parent container at all times regardless of how much content is contained in either div.

If I specify a fixed height on the parent div I can make the child div expand ok - but the layout needs to be fluid and the height can not be fixed - so this option does not work for me.

I tried absolutely positioning the child div and that seemed to be the perfect solution - until the content in the child div exceeded the length of the parent div - which then cut off the content in the child div. AGH!

For such a simple exercise this is proving to be quite frustrating - hoping someone can help me?

I have attached a visual example of what I am trying to achieve and also HTML code.

<style>
html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
.container {
	border:1px solid grey;
	margin:0 auto;
	width: 75%;
	overflow:hidden;
}
.parent {
	background-color: blue;
	position:relative;
	overflow: hidden;
	/*height:500px;   This forces the child (.col2) to expand to the parent - however the content is variable so is not a solution. */
	height:100%;   /* This allows content to expand freely - however it doesn't force the child (.col2) to expand to the full height of the parent (.parent) */
}
.col2 {
	background-color: pink;
}
.child {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float: left;
	padding:0 10px;
	min-height: 100%;
	width: 50%;
}
</style>
</head>

<body>
<div class="container">

<div class="parent">
  <div class="child col1">
    <p>Lorem Ipsum proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit. </p>
    <p>Lorem Ipsum proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit. </p>
    <p>Lorem Ipsum proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit. </p>
    <p>Lorem Ipsum proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit. </p>
    <p>Lorem Ipsum proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit. </p>
  </div>
  <div class="child col2">
    <p>Lorem Ipsum proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit. </p>
    <p>Lorem Ipsum proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit. </p>
    <p>Lorem Ipsum proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit. </p>
    <p>Lorem Ipsum proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit. </p>
  </div>
</div>
</div>

Pretty simple, really. You just need something like display: table on the parent and display: table-cell on the children:

.parent {
	background-color: blue;
	display: table;
}
.col2 {
	background-color: pink;
}
.child {
	display: table-cell;
	padding:0 10px;
	width: 50%;
}

Note the removal of the floats on the children.

An alternative is display: flex etc., though it’s newer and less well supported at this stage.

Brilliant! That’s exactly what I was trying to achieve - thank you @ralphm :smiley:

1 Like

FYI from this behavior…

You are aware of hte min-height property right? It’s almost like a fixed height but it will expand.

Hi @RyanReese, Yes, the min-height property works on the child element but only if the parent has a fixed height - which is what I didn’t want. But thanks for your suggestion. :wink:

No it works as long as the element is’t inline.

It will only work for pixel/em values and you can’t set a percentage height or min-height based on a parent who’s height is dictated by content alone. (You know this anyway Ryan, I think you just mis-read the question :))

ikandee is after equal columns which display;table-cell will do easily.

Was he talking about percentage min heights? I must have missed that…I assumed he was talking about the property itself.

Yes I guessed you misread a little as setting the height was an attempt to match the parents height in order to achieve equal columns which as you know is not possible like that. :wink:

Ah ok yeah I did misread that then. Didn’t have the context he meant.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.