How to make two DIVs inside the main DIV fixed and scrollable

Question

I have a situation where I have 3 divs:

<div id="div1"> // code 
    <div id="div2"> // code </div>
    <div id="div3"> // code </div>
</div>

I need to make it that div1 is always the height of the browser window (responds to window.resize) and that the div2 and div3 all have fixed locations in the browser (div2 at the bottom of div1 and div3 in the middle of div1 with a fixed max-height). Also, div3 might have more content than can fit into its fixed height, so it has a scroll to look through all this content.

I tried various settings including position: fixed; and top: 0; bottom: 0; but it didn't work, as in my div2 is always pushed beyond the boundary of the browser window.

Do you know how I could do that?

Thanks!

enter image description here

can you offer a fiddle for this with the css you tried? – scniro Apr 22 '15 at 20:12 — scniro, Apr 22 '15 at 20:12
http://stackoverflow.com/a/9707674/4028085 – brso05 Apr 22 '15 at 20:12 — brso05, Apr 22 '15 at 20:12

score 0 · Answer 1 · edited May 23 '17 at 11:51

0

Try this to make the div scrollable:

<div style="overflow:auto;">

Code taken from this question and answer link

edited May 23 '17 at 11:51

Community

1
1

answered Apr 22 '15 at 20:13

brso05

13,142
2
21
40

1

yes, i can do scrollable, but how to make its location fixed and for it to not be positioned beyond the boundary of the browser window (and `div1`)? – Aerodynamika Apr 22 '15 at 20:26

score 0 · Answer 2 · edited Apr 22 '15 at 20:51

0

Have you tried overflow:scroll?

CSS:

#div3 {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

edited Apr 22 '15 at 20:51

ByteHamster

4,884
9
38
53

answered Apr 22 '15 at 20:14

Ram Vennam

3,536
1
12
19

yes, i can do scrollable, but how to make its location fixed and for it to not be positioned beyond the boundary of the browser window (and `div1`)? – Aerodynamika Apr 22 '15 at 20:26

How to make two DIVs inside the main DIV fixed and scrollable

2 Answers2