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>