CODEWITHSUNDEEP
htmlcss
Fez Vrasta
Fez Vrasta

Reputation: 14815

Scrollable list doesn't fits the container

I'm trying to make a sidebar with a fixed height (defined by JS) and inside it a div banner and a scrollable list.

The problem is that I want the scrollbar to appear only on the list and I can't use the CSS calc() (no IE8 support).

This is the example of the widget and you can clearly see the problem.
The list goes out for the same height of the banner.

.sidebar {
  height: 300px;
  width: 200px;
  outline: 1px solid red;
}

.banner {
  background: purple;
  height: 50px;  
}

.list {
  margin: 0;
  overflow-y: scroll;
  height: 100%;
}

http://codepen.io/FezVrasta/pen/tfgHx

How can I fix this problem without use of JS?

Upvotes: 0

Views: 50

Answers (2)

Ringo
Ringo

Reputation: 3965

The banner class is a parent and the sidebar class is a child, so it can not over flow it's parent. May be you can do like this, I'm not so sure how your project is. But let try it.

.sidebar {
  height: 300px;
  width: 200px;
  outline: 1px solid red;
  position: absolute;
  left: 0;
  top: 0;
}

.banner {
  background: purple;
  height: 50px;  
  position: relative;
}

.list {
  margin: 0;
  overflow-y: scroll;
  height: 100%;
}

Upvotes: 0

DaniP
DaniP

Reputation: 38252

Just assign fixed max-height to the list you can because you know the other values:

.list {
  margin: 0;
  overflow-y: scroll;
  max-height: 250px;
}

The demo http://codepen.io/anon/pen/yetrd

Edit

For dynamic height of the sidebar but Knowing the height for the banner what you can do is fake the space of the banner with this properties:

.list {
  box-sizing:border-box;
  position:relative;
  margin: 0;
  border-top:50px solid transparent;
  top:-50px;  
  overflow-y: scroll;
  height: 100%;
}

Faking the space of banner as border and negative top on the list you secure always that space. And obviusly with box-sizing:border-box wich is supported on IE8 check the compatibility here

And the new demo http://codepen.io/anon/pen/DbFel

Upvotes: 4

Related Questions