Right panel with div at bottom

Question

To make it simple: I have a page with a div as right panel

.rightPanel{
  position: fixed;
  right: 0px;
}

This panel has aa few div inside (header, titles, etc.) and a div with the body. I need an extra div at the bottom where I will place the action bar.

I have tried

.actionBar{
  position: absolute;
  bottom: 20px;
}

The problem with this approach is that when the body is too big, the action bar will be on top of it. I would like a scroll bar on the body, if needed, with the action bar always fixed at the bottom.

<div class="rightPanel">
  <header> .. </header> 
  <div class="body"> .. </div>
  <div class="actionBar"> .. </div>
</div>

I don't want to give a fixed height to the body as it is dynamically crated.

Answer 1

Use flexbox to have a dynamic middle section. Here's a working demo:

 body { padding: 0; margin: 0; } .rightPanel { display: flex; flex-direction: column; position: fixed; right: 0px; width: 200px; height: 100%; border: 1px solid blue; } header { width: 100%; height: 30px; border: 1px solid red; } .body { flex-grow: 1; width: 100%; height: 100%; overflow: auto; } .actionBar { width: 100%; height: 30px; border: 1px solid red; } 

 <div class="rightPanel"> <header> this is the header </header> <div class="body"> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div> <div class="actionBar"> this is the action bar </div> </div> 

JSFiddle: https://jsfiddle.net/x52rq6du/1/

Answer 2

You can use clear property.

The clear property tells on which sides of an element floating elements cannot float.

By using both value for clear. You can specify no element can float neither on right nor left side of the element. like below:

   .actionBar{
      position: absolute;
      bottom: 20px;
      clear: both; // I think this should solve the problem
    }

Maybe you will need to get rid of position: absolute; as well

Answer 3

What you'll want to do is make .rightPanel a flexbox element, and give it display: flex and flex-direction: column . Then simply give all children flex-grow: 1 , apart from .actionBar , which you want to keep fixed to the bottom. Note that .rightPanel will need a height for this top work, and this height should also accommodate the offset.

This can be seen in the following:

 .rightPanel { position: fixed; right: 0px; top: 20px; display: flex; flex-direction: column; height: calc(100vh - (20px * 2)); } .rightPanel > * { flex-grow: 1; } .actionBar { flex-grow: 0; } 

 <div class="rightPanel"> <header>Header</header> <div class="body">Body</div> <div class="actionBar">Action Bar</div> </div>