Placing a scrollable div below a fixed div of variable height

Question

This is with respect to a mobile page in jquery mobile

I have 2 divs as follows within a parent div(data-role=header)

<div data-role="header">
<div class="inner-topHeader-panel"></div>
<div class="inner-centercontent"></div>
</div>

I want "inner-topHeader-panel" to be a fixed in position(note: it is of variable height) and "inner-centercontent" to be placed below "inner-topHeader-panel" and be scrollable. When scrolled, parts of it that is scrolled up should be hidden behind the "inner-topHeader-panel" div.

Current CSS is as follows.

.inner-topHeader-panel{ 
    width:100%; 
    height:auto; 
    margin:0; 
    background:#fff; 
    border-bottom:none;
    float:left;
    position:fixed !important; 
    top:0;
}

.inner-centercontent{
  width:100%;
float:left;
 padding-bottom: 50px;
 }

solution: Thanks @LessQuesar,@ezanker and @mainguy, I set second div's css as follows and it worked!

.inner-centercontent{ 
width:100%; 
height:100px;
overflow: hidden;
overflow-y: auto;
float:left;  
position:fixed !important;  
padding-bottom: 50px;
}

and i set the .inner-centercontent's top position using jQuery according to the height of .inner-topHeader-panel

Fixed elements don't take up vertical space. If you really need the effect of the content going underneath, you'll need some JS to fix the 2nd div's top padding according to the height of the first div. — LessQuesar, Feb 11 '14 at 16:35

score 2 · Answer 1 · answered Feb 11 '14 at 17:32

On pageshow, calculate the height of the fixed div and set the margin-top of the div below it to that value:

$(document).on("pageshow", "#page1", function(){
    var fixedH = $(".inner-topHeader-panel").outerHeight(true);
    $(".inner-centercontent").css("margin-top", fixedH + "px");
});

DEMO

score 1 · Accepted Answer · answered Feb 11 '14 at 16:24

CSS:

.inner-topHeader-panel {
  width: 100%;
  height: auto;
  margin: 20;
  background: white;
  border-bottom: none;
  float: left;
  clear: both;
  top: 0;
  z-index: 1000;
}
.inner-centercontent {
  width: 100%;
  float: left;
  height: 600px;
  overflow: scroll;
  padding-bottom: 50px;
}

Plunker

Will only scroll when height is smaller than inner content.

Placing a scrollable div below a fixed div of variable height

2 Answers2

Linked