0

I want to add some css for a div height based on screen height and that div height must be the exact screen height.

Can any one help?

subrahmanyam katakam
  • 21
  • 3
  • Possible duplicate of [Make div 100% height of browser window](http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window) – Phaze Phusion Mar 04 '16 at 12:05

3 Answers3

0

Read about @media screen

   @media screen and (max-width: 1024px) {
   div{width:1024px;} 
   }


   @media screen and (min-device-width: 1600px) {
   div {width: 1500px;}
   }


   @media screen and (max-device-width: 1600px) {
   div {width: 1500px;}
   }

Also see

   div(width:calc(100% - 20px);}

And java script

 <div id="id" style="background-color:black;">text</div>
 <script>
 document.getElementById('id').style.width=screen.width;
 document.getElementById('id').style.height=screen.height;

   /*or*/

 document.getElementById('id').style.width=window.innerWidth;
 document.getElementById('id').style.height=window.innerHeight;
 </script>
Michael
  • 1,089
  • 1
  • 11
  • 28
  • I can do it by js but I want to adjust the div height based on screen resolution with css only. with @media queries we can adjust the width based on screen resolution, but for height how can I do this? – subrahmanyam katakam Mar 07 '16 at 08:39
  • I write you, if you wont only css then try `@media screen`. Read about it – Michael Mar 07 '16 at 12:33
0

You could use JavaScript to get the window height using window.innerHeight (be aware that this value EXCLUDES scrollbars/toolbars).

Full example:

 var windowHeight = window.innerHeight;
 var div = document.getElementById("div");
 div.style.height = windowHeight
Mike Resoli
  • 1,005
  • 3
  • 14
  • 37
0
    div {
        background-color: red;
        height: 100vh;
    }
Rayudu
  • 71
  • 1
  • 3