Размещение прокручиваемого div ниже фиксированного div переменной высоты

Это касается мобильной страницы в jQuery mobile

У меня есть 2 divs следующим образом в родительском div (data-role = header)

Я хочу, чтобы «inner-topHeader-panel» была фиксированной в позиции (обратите внимание: она имеет переменную высоту), а «внутреннее-центральное содержимое» располагается ниже «inner-topHeader-panel» и прокручивается. При прокрутке fragmentы, которые прокручиваются, должны быть скрыты за div «inner-topHeader-panel».

Текущий CSS выглядит следующим образом.

 .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; } 

Решение: Спасибо @ LessQuesar, @ ezanker и @mainguy, я установил css второго div, как показано ниже, и это сработало!

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

и я установил верхнее положение .inner-centercontent, используя jQuery в соответствии с высотой .inner-topHeader-panel

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

Будет прокручиваться только тогда, когда высота меньше внутреннего содержимого.

На pageshow высоту фиксированного div и установите margin-top div ниже этого значения:

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

DEMO