flexible height scrolling div

Question

I have a sidebar with three interior div's like so:

<div class="sidebar">
    <div class="top">
        <h3>Title</h3>
        <img src="somesource.jpg" alt="The size of this can change" />
    </div>
    <div class="middle">
        <!-- there is an unknown amount of content here represented below coming from a server -->
        <h2>There may be very few of these or a lot of them</h2>
        <p>see the heading also in this div</p>
    </div>
    <div class="bottom">
        <button>This is a button for navigation only visible in the sidebar</button>
    </div>
</div>

I have css for them shown below:

.sidebar {
    position:fixed;
    height: calc(100% - 67px); /* height of the window - height of the header */
    width: 20%;
    bottom: 0px;
    right: 20px;
}
.bottom {
    height: 100px;
}

What css do I need to add to make .top take up the space it needs, .bottom stick to the bottom of .sidebar, and .middle take up all the remaining space and scroll if necessary? Currently, using javascript isn't an option as I have been given direct instruction by my boss to do this without javascript.

EDIT:

I can now use javascript and I have it working by calculating the height of .top and subtracting that and the height of .bottom from 100% and setting bottom for .middle to the height of .bottom.

Matt Cremeens · Answer 1 · 2014-07-01T18:18:01.213

0

Did you try something like this?

<table class="sidebar">
<tr class="top">
    <td><h3>Title</h3>
        <img src="somesource.jpg" alt="The size of this can change" /></td>
</tr>
<tr class="middle">

    <td><h2>There may be very few of these or a lot of them</h2>
        <p>see the heading also in this div</p></td>
</tr>
<tr class="bottom">
    <td><button>This is a button for navigation only visible in the sidebar</button></td>
</tr>

and

table {
  position: relative;
  left: 70%;
  width: 10px;
}

?

edited Jul 01 '14 at 18:18

answered Jul 01 '14 at 16:49

Matt Cremeens

4,951
7
38
67

The size of everything in top (1, 2, or 3 line titles and variable size images) is a variable height and .middle needs to fill to about 10px under the bottom of .top which will be set using padding with box-sizing:border-box. – mgbowe1 Jul 01 '14 at 17:23
Then could you just make the heights of each dive be something like 10%, 80% and 10% for top, middle and bottom, respectively? Middle could be `position: relative;` and then you could use `top: 10px;`. – Matt Cremeens Jul 01 '14 at 17:54
this becomes an issue as the images are such different heights percentages make everything look awkward (actually it looked so bad I was told to change it as some images overflowed .top creating a horrid overlap effect and others only used half the space creating an awkward gap). – mgbowe1 Jul 01 '14 at 18:01
What about sticking sidebar elements into a table instead of divs? – Matt Cremeens Jul 01 '14 at 18:04
that is almost exactly what I tried except with the `` 100% width and height inside a `
` I positioned where I needed it.
– mgbowe1 Jul 01 '14 at 18:53
Would using `overflow: scroll;` help any of your issues? You mentioned images being to big for their container. Would allowing scrolling be acceptable? – Matt Cremeens Jul 01 '14 at 18:59
The images cannot scroll (as they are only in .top which can't scroll). I am using overflow-y:auto on .middle currently, the height just can't be calculated correctly to avoid overlap with either .bottom or .top and I have them exactly where I want/need them. – mgbowe1 Jul 01 '14 at 19:04
So can you tell me exactly what went wrong with the table approach? – Matt Cremeens Jul 01 '14 at 19:10
the table overflowed the sidebar when there was too much content and didn't fill it when there wasn't enough and there wasn't a solution for scrolling that didn't hack out the table layout anyway. – mgbowe1 Jul 01 '14 at 19:12

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

If I didn't misunderstood this question what you are looking for is a layout with fluid and fixed height.

I don't think there is any way to do what you want and have the .middle container scroll as you would need to set a fixed/percantage height in order to be able to do that (or setting a height on the .top element as already suggested). Anyhow here's a qucik solution I did that might help you get something similar to what you want.

Fiddle

HTML

<div class="sidebar">
    <div class="container">
        <div class="top">
            <h3>Title</h3>
            <img src="http://dummyimage.com/200x100/000/fff" alt="The size of this can change" />
        </div>
        <div class="middle">
            <h2>There may be very few of these or a lot of them</h2>
            <p>see the heading also in this div ASDFasdf asdf asdf asdf asdf asdf</p>
        </div>
    </div>
    <div class="bottom">
        <button>This is a button for navigation only visible in the sidebar</button>
    </div>
</div>

CSS

.sidebar {
    position:fixed;
    padding-top: 167px; /* add .bottom height (100px) */
    height: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 20%;
    bottom: 0;
    right: 20px;
}
.container {
    position: relative;
    height: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: -100px; /* set to .bottom height */
    overflow: auto;
}
.bottom {
    height: 100px;
}

If you need better browser support you can use an alternative to calc() as I have done in my answer.

edited May 23 '17 at 12:05

Community

1
1

answered Jul 01 '14 at 17:41

am_

2,378
1
21
28

Thanks for the idea. I tried that yesterday, the problem that arises is that the contents .top must always be visible and in this solution the contents of .top scrolls with everything else. – mgbowe1 Jul 01 '14 at 17:53
In theory .bottom doesn't need to be a fixed height, it is just consistently populated with the same content so I set height to be the height of the content and padding for it. Would it help if .bottom didn't have a fixed height in the css? – mgbowe1 Jul 01 '14 at 18:21
I modified @am_ 's answer as it appeared to get you quite close. Maybe `http://jsfiddle.net/hoozits/JLQGa/1/` will get you a little closer. – Matt Cremeens Jul 01 '14 at 19:38
@mgbowe1 yeah I'm aware you want the top to not be included in the scroll, the problem is then you have to use javascript to calculate height of .top and subtract that from .middle. Matt's modification of my jsfiddle still relies on fixed height on .top - as soon as you put a 400 height image or something else in .top it will overlap the .middle. There might be a way to achieve this with only css, but it would consist of "css hacks" and not better than a small javascript included imho. – am_ Jul 02 '14 at 07:39
@am_ That's why I just caved and used javascript, like I originally had been doing. See my earlier edit to the question. – mgbowe1 Jul 02 '14 at 19:53

flexible height scrolling div

2 Answers2