html - how to make content to be fixed inside scroll div using only css? -

as per shown in below image , want blue div fixed @ place after scroll "hello world" div. have tried http://jsfiddle.net/9v6xwkk2/3/ unable it. please me , in advance.

<div class="container"> <div class="inner"> <div class="full-height">     fix unscrollable content </div>     <div style="width:400px;height:400px;background:black:color:white">hello world</div>  </div> </div> 

you can try -

* { box-sizing: border-box; }  .container {      position: relative;      height: 256px;      width: 256px;  }  .inner {      float: left;      margin-right: 16px;      border: solid 1px red;      overflow: auto;      height: 256px;      width: 100%;  }  .full-height {     	background: blue;      bottom: 17px;      color: white;      left: 1px;      position: absolute;      width: 238px;;  }

<div class="container">      <div class="inner">          <div style="width:400px;height:400px;background:black:color:white">hello world</div>      </div>      <div class="full-height">          fix unscrollable content      </div>  </div>

i hope helps you.