CODEWITHSUNDEEP
htmlcss
user1153484
user1153484

Reputation: 195

Placing a child div always bottom of the parent div

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

Upvotes: 1

Views: 376

Answers (1)

BobbyTables
BobbyTables

Reputation: 4685

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)

Upvotes: 5

Related Questions