cocacrave cocacrave - 1 year ago 149
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>

So I have the
height: 100vh

should have
height: 100%
of parent.

should have
width: 100%
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:

Answer Source

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();

	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=""></script>
<div id="parent">
  <div id="child-1">
    <strong>I'm child 1</strong>
  <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 id="child-3">
    <strong>I'm child 3</strong>

Hope this helps!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download