Scroll and fix div elements

Question

I have a web page with a side bar where locates at the left side.

The side bar is now scrollable and have 2 divs in it. The height of 2 divs is bigger than the window's height.

Below is a similar picture of the page. The height of div1 is variable, eg the height of div1 is 400~800px depends on how many content is added, and the height of div2 is always 250px.

<div id="sidebar">
    <div id="div1" style="overflow-y:scroll;">
        <ul>
            <li>1</li>
            <li>2</li>
               ... 
            <li>N</li>
        </ul>
    </div>

    <div id="div2">
        <div>Constant Content</div>
    </div>
</div>

Somehow there is no scroll bar in the div1.

My objective is to fix the div2 at the left-bottom corner and show its all content without scrolling down, and the div1 should be scrollable to see its content.

Any help would be greatly appreciated.

Answer 1

I usually use flex for this:

 html, body { margin: 0; height: 100%; background: lightblue; } /* make sidebar flex and 100% height */ #sidebar { height: 100%; display: flex; flex-direction: column; /* demo only */ width:200px; } #div1 { flex-grow: 1; /* make div1 grow to take remaing space after div 2 hs shown it's contents */ position: relative; background: lightgreen; } .scroll { /* this just fills your div 1 and then scrolls if it overflows */ position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: auto; } #div2 { /* demo only as there is no content, I just gave some height for demo purpose */ min-height:50px; background:orange; }

 <div id="sidebar"> <div id="div1"> <div class="scroll"> <ul> <li>1</li> <li>2</li> <li>N</li> <li>1</li> <li>2</li> <li>N</li> <li>1</li> <li>2</li> <li>N</li> <li>1</li> <li>2</li> <li>N</li> <li>1</li> <li>2</li> <li>N</li> <li>1</li> <li>2</li> <li>N</li> <li>1</li> <li>2</li> <li>N</li> <li>1</li> <li>2</li> <li>N</li> <li>1</li> <li>2</li> <li>N</li> </ul> </div> </div> <div id="div2"> <div>Constant Content</div> </div> </div>

Answer 2

you have to set an height for the scrollable div so:

<div id="sidebar">
<div id="div1" style="overflow-y:scroll; height:50vh;">
    <ul>
        <li>1</li>
        <li>2</li>
           ... 
        <li>N</li>
    </ul>
</div>

<div id="div2">
    <div>Constant Content</div>
</div>

i think with this should work

Answer 3

So after you edited your question, I adjusted my answer based on the height you were given.

Side bar will work dynamically:

• the sidebar can grow from 650px till 1050px
• The div1 will grow from 400px minimum till 800px and over, it will use overflow.
• div2 will always make height: 250px

Code:

    #sidebar{
      min-height: 650px;
      max-height: 1050px;
      width: 20vw;
      display:flex;
      flex-direction: column;
    }
    #div1{
      min-height: 400px;
      max-height: 800px;
      height: auto;
    }
    #div2{
      height: 250px;
    }

DEMO (short text in div1)

 body{ margin:0; display:flex; } main{ height: 600vh; width: 80vw; background:lightblue; } #sidebar{ min-height: 650px; max-height: 1050px; width: 20vw; display:flex; flex-direction: column; } #div1{ min-height: 400px; max-height: 800px; height: auto; background:orange; } #div2{ height: 250px; background:lightgreen; } #div1 ul{ margin:0; }

 <div id="sidebar"> <div id="div1" style="overflow-y:scroll;"> <ul> <li>1</li> <li>2</li> ... <li>N</li> <li>1</li> <li>2</li> ... <li>N</li> </ul> </div> <div id="div2"> <div>Constant Content</div> </div> </div> <main> </main>

DEMO (long text in div 1)

 body{ margin:0; display:flex; } main{ height: 600vh; width: 80vw; background:lightblue; } #sidebar{ min-height: 650px; max-height: 1050px; width: 20vw; display:flex; flex-direction: column; } #div1{ min-height: 400px; max-height: 800px; height: auto; background:orange; } #div2{ height: 250px; background:lightgreen; } #div1 ul{ margin:0; }

 <div id="sidebar"> <div id="div1" style="overflow-y:scroll;"> <ul> <li>1</li> <li>2</li> ... <li>N</li> <li>1</li> <li>2</li> ... <li>N</li> </ul> <ul> <li>1</li> <li>2</li> ... <li>N</li> <li>1</li> <li>2</li> ... <li>N</li> </ul> <ul> <li>1</li> <li>2</li> ... <li>N</li> <li>1</li> <li>2</li> ... <li>N</li> </ul> <ul> <li>1</li> <li>2</li> ... <li>N</li> <li>1</li> <li>2</li> ... <li>N</li> </ul> <ul> <li>1</li> <li>2</li> ... <li>N</li> <li>1</li> <li>2</li> ... <li>N</li> </ul> <ul> <li>1</li> <li>2</li> ... <li>N</li> <li>1</li> <li>2</li> ... <li>N</li> </ul> <ul> <li>1</li> <li>2</li> ... <li>N</li> <li>1</li> <li>2</li> ... <li>N</li> </ul> <ul> <li>1</li> <li>2</li> ... <li>N</li> <li>1</li> <li>2</li> ... <li>N</li> </ul> <ul> <li>1</li> <li>2</li> ... <li>N</li> <li>1</li> <li>2</li> ... <li>N</li> </ul> <ul> <li>1</li> <li>2</li> ... <li>N</li> <li>1</li> <li>2</li> ... <li>N</li> </ul> <ul> <li>1</li> <li>2</li> ... <li>N</li> <li>1</li> <li>2</li> ... <li>N</li> </ul> <ul> <li>1</li> <li>2</li> ... <li>N</li> <li>1</li> <li>2</li> ... <li>N</li> </ul> </div> <div id="div2"> <div>Constant Content</div> </div> </div> <main> </main>

Answer 4

As Pete suggested, but making the sidebar stick and no min-height :

 html, body { height: 200%; background: lightblue; } #sidebar { height: 100vh; display: flex; flex-direction: column; width: 200px; position: fixed; top: 0; left: 0; } #div1 { position: relative; background: lightgreen; height: 105px; } .scroll { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: auto; } #div2 { background: orange; flex: 1; }

 <div id="sidebar"> <div id="div1"> <div class="scroll"> <ul> <li>1</li> <li>2</li> <li>N</li> <li>1</li> <li>2</li> <li>N</li> <li>1</li> <li>2</li> <li>N</li> <li>1</li> <li>2</li> <li>N</li> <li>1</li> <li>2</li> <li>N</li> <li>1</li> <li>2</li> <li>N</li> <li>1</li> <li>2</li> <li>N</li> <li>1</li> <li>2</li> <li>N</li> <li>1</li> <li>2</li> <li>N</li> </ul> </div> </div> <div id="div2"> Constant Content </div> </div>