html - Make 100% of height responsive for any device -


how give 100% height div when give height 100% (it's not working) give height 100vh min-height 100vh create space , div become more larger required try max-height not working. want give height 100% of element any small device it. in example height become greater screen , make scroll. how 100% out scroll out missing element.

<!doctype html>  <div class="header">asas </div>  <div class="main"> </div>  <div id="footer">   </div>  <style> .header {     width:100%;     height:60px;     background:#000;      } .main {   width:100%; min-height:100vh;     background:#c00;      }     #footer     {width:100%;    height:100px;     background:#0c3;         } </style> 

you can use calc() take off values of header , footer:

body {margin:0}  .header {    height: 60px;    background: #000;  }  .main {    min-height: calc(100vh - 160px);    background: #c00;  }  #footer {    height: 100px;    background: #0c3;  }
<div class="header">asas  </div>    <div class="main">  </div>    <div id="footer">  </div>


Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

5 Reasons to Blog Anonymously (and 5 Reasons Not To)

Google AdWords and AdSense - A Dynamic Small Business Marketing Duo