Keep Child Div On The Bottom Of Parent Div

I need to keep the subfooter div on the bottom of childbox div like a footer.Here is the jsfiddle

Solution 1:

Use following css:

.parentbox:before {
  vertical-align: bottom;
}
.childbox {
  vertical-align: bottom;
}

Currently you have set vertical-align: middle in your css causing your child element to appear in middle of screen.

* {box-sizing: border-box;}
body {margin: 0;}
.parentbox {
  width:500px;
  height:100vh;
  border-style:solid;

  text-align: center;  /* align the inline(-block) elements horizontally */
}

.parentbox:before {      /* create a full-height inline block pseudo-element */content: ' ';
  display: inline-block;
  vertical-align: bottom; /* vertical alignment of the inline element */height: 100%;
}

.childbox {
  display: inline-block;
  vertical-align: bottom;          /* vertical alignment of the inline element */padding: 5px;
  border: 2px solid black;
}

<divclass="parentbox"><divclass="childbox">
    I shall be in the bottom of parentbox regardless of its size!
  </div></div>

Solution 2:

As per CSS specification, the parent must be set to position: relative and the child can be set to position: absolute or fixed

The modified fiddle for your amusement, know that the answer to this question can be found pretty much anywhere both on this website and the internet. Positioning, that's the word.

JSFiddle

Also, a nice link about an article on positioning, might be helpful. Positioning

Solution 3:

here maybe it help.

html,body{
height:100%;
margin:0;
padding:0;}

.parentbox{
background:#ccc;
height:100%;
display:flex;
align-items:center;
justify-content:center;}

.childbox{
align-self:flex-end;
background:#999;}

<divclass="parentbox"><divclass="childbox">
        I shall be in the middle of parentbox regardless of its size!
    </div></div>

it has many ways to answer.

1. position absolute, and set bottom to 0.
2. display flex and set align items or align self

you need to read more about css. wish it help.

Solution 4:

You don't need to add the pseudo element for that just add position styling and there you go.

.parentbox {
    width:500px;
    height:400px;
    border-style:solid;
    text-align: center;  /* align the inline(-block) elements horizontally */position: relative;
}

.childbox {
    display: block;
    padding: 5px;
    border: 2px solid black;
    position: absolute;
    left: 0;
    right: 0;
    bottom:0;
    margin: 5px;
}

<divclass="parentbox"><divclass="childbox">
    I shall be in the middle of parentbox regardless of its size!
  </div></div>

Solution 5:

Here is your Answer, Through CSS itself you can achieve this.

.parentbox{
  height: 300px;
  width: 200px;
  background-color: #990000;
  position: relative;
}
.childbox{
  color: #fff;
  background-color: #000;
  position: absolute;
  bottom: 0;
  padding: 10px;
}

<divclass="parentbox"><divclass="childbox">
        I shall be in the middle of parentbox regardless of its size!
    </div></div>