将子div始终放置在父div的底部

Question

I am trying to design a html layout wherein the child div should always remain at the bottom of the parent div. The height of the parent div should be 100% by default. Please provide me a solution for the same.

link: https://jsbin.com/pihekufime/edit?html,css,output

HTML:

<div class="wrapper">
  <div class="header"></div>
  <div class="left">menu</div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing...
    <div class="bottom">index</div>
  </div>
</div>

CSS:

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

.header {
 background: #4a90e2;
 height: 100px;
 position: fixed;
 width:100%;

 }


.left {

position: fixed;
height: 100%;
top: 100px;
background: #F44336;
width: 20%;

}

.content {

position: relative;
height: 100%;
top: 100px;
left: 20%;
background: #555;
width: 80%;
color:#fff;
min-height: 100%;
}

.bottom {
position: absolute;
bottom: 0px;
background: yellow;

}

The div with class 'Bottom' should always stay at the bottom of the div with class 'Content' wherein the other divs are fixed

Answer 1

If you set you .wrapper to 100% height, the .content will also be 100% of the height, and the .bottom will be positioned at the bottom of this div. This might not be the behaviour you want, but it is the answer to your question (we dont have info about how the entire thing should work/expand/scroll/align with content)