html - Make DIV to the page bottom so that it does not stay on top of absolutely positioned content? -

i have add wrapper around html content produced others. want achieve add header , footer pages (height varies) produced other people new pages have header , footer. pages produced others absolutely positioned. how can use css make footer stay in bottom of pages, not on top of content produced other people?

this html structure have. cannot change html structure or css of content produced others.

<div class="my-wrapper">   <div class="my-header">my header </div>   <div class="others-wrapper">      <div class="html-from-other-people">        <div> <!--this 1 outside container -->         few outside container divs , comes absolutely-positioned div content.        </div>      </div>   </div>   <div class="my-footer">footer goes here</div>  </div> 

i cannot have sticky header or footer. footer has stay in bottom of page content, not bottom of viewport.

update

the html other people structured few outside container divs , absolutely-positioned div content. please see updated example html above.

display:flex job:

html,  body,  .my-wrapper {    height: 100%;    margin: 0;  }  .my-wrapper {    width:80%;    margin:auto;    background:tomato;    display: flex;    flex-flow: column;  }  .others-wrapper {    flex: 1;    overflow: auto;    background:turquoise;  }

<div class="my-wrapper">    <div class="my-header">my header , <br/>never mind size</div>    <div class="others-wrapper">      <div class="html-from-other-people">use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed       </div>    </div>    <div class="my-footer">footer goes here never mind size</div>  </div>

---

version without sticky header / footer

html,  body {    height: 100%;    margin: 0;  }  .my-wrapper {    min-height: 100%;    width:80%;    margin:auto;    background:tomato;    display: flex;    flex-flow: column;  }  .others-wrapper {    flex:1 ;    background:turquoise;  }  /* demo purpose */    .others-wrapper {    color:green;    font-size:1.5em;  }    .html-from-other-people {    color:black;    font-size:0.75em  }  :checked + div {    font-size:0;    }

<div class="my-wrapper">    <div class="my-header">my header , <br/>never mind size</div>    <div class="others-wrapper">quick demo purpose show/hide text below:<input type="checkbox">      <div class="html-from-other-people">          use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed <br/>use whole space between header & footer , scrlls if needed       </div>    </div>    <div class="my-footer">footer goes here never mind size</div>  </div>