CSS Layout Push Div Bottom - html

Question

I've been trying different ways but couldn't achieve what I want.
<div id="parent">
<div id="child-1"></div>
<div id="child-2"></div>
<div id="child-3"></div>
</div>
So I have the #parent at height: 100vh.
#child-1 should have height: 100% of parent.
#child-2 and #child-3 should have width: 100% and height: auto and they should be stacked on top of each other at position bottom: 0.
I've been trying to set parent relative and two childs absolute but the first child's height gets ignored.. I tried with display flex but first child's height is not 100% of parent.. I'm very confused how to do this.
Can someone help?
Here is what I'm trying to achieve: jsfiddle.net

Answer 1

You have to first get the bottom value of #child-2 dynamically as you said it should be on the top of #child-3.
You need to apply jQuery to get the height of #child-3 dynamically and then applying the height value of #child-3 to the bottom value of child-2, just like
#child-2 {
bottom: height-of-child-3;
}
Look at this Codepen
Or look at the snippet below:
height_child_three = $('#child-3').height();
$('#child-2').css({
position: 'absolute',
bottom: height_child_three
});
#parent {
width: 100vw;
height: 100vh;
background: #000;
position: relative;
}
#child-1 {
width: 100%;
height: 100%;
background: #eee;
}
#child-2 {
width: 100%;
background: #a0ea0e;
}
#child-3 {
position: absolute;
bottom: 0;
width: 100%;
background: #30e30e;
}
body { margin: 0; } /* A small reset */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child-1">
<strong>I'm child 1</strong>
</div>
<div id="child-2">
<strong>I'm child 2</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione deleniti voluptate commodi distinctio, repellendus qui, placeat laboriosam eligendi! Ducimus reiciendis officiis debitis placeat adipisci quae hic tempore vitae suscipit nemo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sed aliquid, laborum nisi quos excepturi hic! Molestias hic consectetur dolor! Perferendis iste, quisquam quaerat ab, odio ducimus! Odio, minima error?</p>
</div>
<div id="child-3">
<strong>I'm child 3</strong>
</div>
</div>
Hope this helps!

Answer 2

Is this what you need?
HTML:
<div id="parent">
<div class="child-1"></div>
<div class="child-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error voluptatum necessitatibus dolorem soluta laudantium cupiditate maiores neque, aliquid accusamus autem saepe tempora, itaque possimus, eaque deleniti odio atque enim omnis.</div>
<div class="child-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, illo est dolor dolores placeat deleniti quae consequuntur eum ipsum blanditiis laboriosam quod repellendus fugit! Odio quis rem vel a dolores.</div>
</div>
CSS:
html,
body,
div {
margin: 0;
padding: 0;
}
*,
*:after,
*:before {
box-sizing: border-box;
}
#parent {
position: relative;
width: 100vw;
height: 100vh;
background: #ccc;
}
.child-1 {
width: 100%;
height: 100%;
background: red;
}
.child-2 {
width: 100%;
height: auto;
padding: 30px;
background: blue;
}
.child-3 {
width: 100%;
height: auto;
padding: 30px;
background: green;
}
Here you can see a solution just using plain CSS. CODEPEN