html - Scrollable content inside a fixed element with max-height -

i'm trying implement scrollable popup has header, body , footer.

it has fixed positioning parent has max-height depending on screen, , both header , footer absolute positioned on top , bottom respectively.

what i'm trying achieve make body scrollable on max-height reaching, using css. i've tried far:

<div class="popup">   <div class="popup-header">header</div>   <div class="popup-body">body</div>   <div class="popup-footer">footer</div> </div> 

style:

.popup {     position: fixed;     top: 10%;     left: 0;     margin-left: 10%;     width: 80%;     max-height: 80%; }  .popup-header {   position: absolute;   top: 0;   left: 0;   width: 100%;   height: 40px;   background: #eee; }  .popup-body {   margin-top: 40px;   margin-bottom: 40px;   overflow-y: scroll;   max-height: 100%; }  .popup-footer {   position: absolute;   bottom: 0;   left: 0;   width: 100%;   height: 40px; } 

you can see in further detail here: https://jsfiddle.net/r7ztu8ol/ (note: fill body body <br /> until overflows)

in order .popup-body scrollable have set height property fixed number.

[solution 1]: **css code:

.popup-body {   margin-top: 40px;   margin-bottom: 40px;   overflow-y: auto;   height: 400px; // fixed height   max-height: 100%; } 

check out updated version of your jsfiddle.

edit:

[solution 2]:

• remove position: absolute properties , set them position: relative. can't expect have responsive layout, when throw elements out of flow.

• remove width: 100% properties , substitute them display: block in .popup-header, .popup-body , .popup-footer. achieve same result , it's more efficient in case.

check out this jsfiddle visual representation.

the css code (with position: relative) :

.popup-header {   position: relative; }  .popup-footer {   position: relative; } 

edit 2:

[solution 3]: - in solution, must set position: absolute , set min-height popup window. have set 80%.

the css code (showing min-height , position: absolute):

.popup {     min-height: 80%; }  .popup-header, .popup-body, .popup-footer {   position: absolute; } 

see third solution closest want here.

edit 3:

[solution 4]: (with javascript)

• remove min-height popup.

** css code** (slightly changed margin , removed min-height of popup):

.popup {   background-color: #fff;   border: 1px solid #ccc;     position: fixed;     top: 10%;     left: 0;     margin-left: 10%;     width: 80%;     max-height: 80%; }  .popup-body {   margin: 50px auto; } 

javascript code:

<script>     // declare variables     var body = document.getelementsbyclassname("popup-body")[0];     var maxheight = body.parentelement.style.maxheight;     var bodyheight = 0;     const bodymargin = 100;      // height of first 5 children     (var = 0; < body.children.length; i++) {         bodyheight += body.children[i].offsetheight;     }     // set height popup (parent)     bodyheight = (bodyheight <= maxheight) ? bodyheight : maxheight;     body.parentelement.style.height = bodymargin + bodyheight + "px"; </script> 

since none of previous solutions adequate, seems javascript inevitable. script simple , easy implement.

you can check out updated jsfiddle here.