Div with scrollbar inside div with position:fixed

user_35716 0
Viewed 105451

I have a div with position:fixed that is my container div for some menus. I've set it to top:0px, bottom:0px to always fill the viewport. Inside that div I want to have 2 other divs, the lower one of which contains lots of lines and has overflow:auto. I would expect that it would be contained within the container div, but if there are too many lines it simply expands outside the fixed div. Below is my code and a screenshot to clarify:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>MyPlan</title>
    <meta name="X-UA-COMPATIBLE" value="IE=8" />
    <style type="text/css">
        #outerfixed { position:fixed;  width:200px;  background-color:blue; padding:5px; top:0px; bottom:30px;}
        #innerstatic1 { width:100%; background-color:yellow; height:100px;}
        #innerstatic2 { overflow:auto; background-color:red; width:100%;}
    </style>
</head>
<body>
    <div id="outerfixed">
        <h3>OUTERFIXED</h3>
        <div id="innerstatic1">
            <h3>INNERSTATIC1</h3>
        </div>
        <div id="innerstatic2">
            <h3>INNERSTATIC2</h3>
            line<br />
                        ...lots of lines
            line<br />
        </div>
    </div>
</body>
</html>

alt text

Is there any way for me to do this? Again, I want #innerstatic2 to be properly contained within #outerfixed and get scrollbars if it gets bigger than the space it has inside #outerfixed.

I know there are some possibilites to hack around this by also fixing #innerstatic2, but I would really like it to be within the flow inside #outerfixed if possible, so that if I move #outerfixed somewhere, the inner element would come with it.

EDIT: I know I can set overflow:auto on the #outerfixed and get a scrollbar on the whole thing, but I specifically want a scrollbar just on #innerstatic2, it is a grid and I want to scroll just the grid.

Anyone? Possible?

css-position css
8 Answers

Not ideal, but this should get you 90% of they way

<div style="position:fixed; bottom:1px; left:5em; height: 20em; width:20em; background-color:blue;">
        <div style ="width:15em; background-color: green;">
                Title
        </div>
        <div style ="background-color:yellow; max-height:80%; width:15em; overflow:auto;">
                <div style="height:100em; background-color:red; width:10em;">
                        scroll<br/>
                        scroll<br/>
                        scroll<br/>
                </div>  
        </div>  
</div>
user_647090

So I couldn't do with the fixed position but I got the desired effect with the position as relative.

Try this

<div class="parent" style = "overflow: scroll;  position: relative; width: content-box"">

  <div class="scrollable-child" >
   //Your content here
   
  </div>

</div>

I used this in one of my vuejs projects

<template>
  <v-flex class=" d-flex flex-column " style="overflow: scroll;  position: relative; width: content-box">

//FIXED HEAD

    <v-flex class="pt-10" style="position: fixed; background-color: black;width: 25.2em;z-index: 1;border-radius: 20px 20px 0 0">
      <TextView class="mx-4" text="Thur 28, 2021" size="24" bold :color="colors.primaryText"/>
      <TextView   :text="`${order.totalOrder()} Items`" size="24" bold :color="colors.primaryText" class="my-2 mx-4"/>
      <v-divider dark style="height: 5px" class="max-4" />
    </v-flex>
   

//SCROLABLE LIST ITEMS

    <v-flex class=" mx-4 d-flex flex-column justify-end  " style="margin-top: 100px;padding-bottom: 100px; padding-top: 50px">
<!--      <TextView :text="receipt" :color="colors.primaryText"/>-->
        <ProductComponent type="cartItem" v-for="(product,index) in order.products" :key="`order_item_${index}`" :product="product" :invert-theme="true" @onAdd="addOneMore(index)" @onRemove="removeOne(index)" />
    </v-flex>

//BOTTOM FIXED BTN

    <v-flex class="d-flex flex-column justify-end mb-2 xs12 mx-4 " style="max-height: 100px; position: fixed; bottom: 30px; width: 23em"  >
      <v-btn block ref="renderBtn" @click="renderReceipt()" depressed min-height="60" style="border-radius: 20px">
       <TextView text="Order" bold/>
      </v-btn>
    </v-flex>
  </v-flex>
</template>
user_91386210
Related