Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Div with scrollbar inside div with position:fixed

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?

like image 980
Einar Egilsson Avatar asked Oct 01 '10 06:10

Einar Egilsson


People also ask

How can I fix div while scrolling?

To make div fixed scrolling to that div with CSS, we can use the position: sticky CSS property. position: -webkit-sticky; position: sticky; top: 0; z-index: 1; to set position to sticky and z-index to 1 to make the element with the sticky position show on top after we scroll to it.


2 Answers

There's a two-step solution for this, but it comes at something of a cost:

  1. Add overflow-y: scroll; to the css for #innerstatic2.
  2. define a height (or max-height) for #innerstatic2, otherwise it won't overflow, it'll just keep increasing its height (the default for a div is height: auto).


Edited because I just can't stop myself, sometimes.

I've posted a demo on jsbin to show a jQuery implementation of this, which will calculate a height for you (it's not generalised, so it'll only work with your current html).

(function($) {   $.fn.innerstaticHeight = function() {         var heightOfOuterfixed = $('#outerfixed').height(),         offset = $('#innerstatic2').offset(),         topOfInnerstatic2 = offset.top,         potentialHeight = heightOfOuterfixed - topOfInnerstatic2;          $('#innerstatic2').css('height',potentialHeight);   } })(jQuery);  $(document).ready(     function() {         $('#innerstatic2').innerstaticHeight();     } ); 
like image 67
David Thomas Avatar answered Oct 17 '22 19:10

David Thomas


I solved it by giving absolute position to the ul and height 100%

ul {   overflow-y: scroll;   position: absolute;   height: 100%; } 

check out this FIDDLE

like image 43
Ofir D Avatar answered Oct 17 '22 17:10

Ofir D