How to create responsive layout for following structure?

Requirements

  • Float sidebar from right 10% over all div .
  • Sidebar height 100%
  • Hidden for below 768px width
  • Footer stick to bottom
  • main div overflow-y:scroll auto;
  • sidebar contains navigation menus
  • overflow hidden for body & wrapper

    <div id="wrapper">
    
        <div class="container">
            <div id="main">
            </div>   
    
            <div id="sidebar">
            </div>
        </div>  
    
        <div id="footer">
            <p>Footer</p>
        </div>  
    
    </div>
    

html, body {
  overflow:hidden;
}
.wrapper {
  overflow:hidden;
}
.main {
overflow-y:scroll auto;
}
.sidebar > div{float:left; height:100% fixed;}
.container .main{width:70%:}
.container .sidebar{width:30%}

to keep footer give fixed height to it.