cocacrave cocacrave - 1 month ago 6
CSS Question

CSS Layout Push Div Bottom

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/vhLuze86

Answer

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!