CODEWITHSUNDEEP
htmlcss
user1544128
user1544128

Reputation: 582

Right panel with div at bottom

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

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

This panel has a a 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.

Upvotes: 0

Views: 283

Answers (3)

Evik Ghazarian
Evik Ghazarian

Reputation: 1791

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

Upvotes: 0

Miguel
Miguel

Reputation: 20633

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/

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42304

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>

Upvotes: 0

Related Questions