-3

I have used this technique to made my div's height be 100%:

body, html {
height: 100%;
}

#myDiv {
  height: 100%;
}

and everything is perfect on usual devices, however on screens with large resolutions(27 inch) it is not working properly, how can i fix that? thanks!

user3505689
  • 97
  • 1
  • 1
  • 10

2 Answers2

0

set default margin of body tag to 0px, may be it will work. e.g. I have added below code it work fine for me

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style type='text/css'>
        body, html {
            height: 100%;
            margin:0px;
        }
        #myDiv {
            height: 100%;
            background:red;
        }
        </style>
    </head>
    <body>
        <div id='myDiv'></div>
    </body>
</html>
Gourav Makhija
  • 710
  • 7
  • 16
-4

Your div needs to be positioned absolutely. 

*{
  margin: 0px;  
}
html, body, .parent {
 height: 100%;
}
.parent {
 background: red; /* for visual */
 position: relative; /* needed */
}
.child {
 background:blue; /* for visual */
 position: absolute; /* needed */
 top: 50%; /* needed */
 transform: translateY(-50%); /* needed */
}
<div class='parent'>
 <div class='child'>Hello.</div>
</div>
Bojan Petkovski
  • 6,835
  • 1
  • 25
  • 34
verthandi
  • 74
  • 6
  • No, that's not required at all, and would in any case be more harmful (for general cases)... – kumarharsh Dec 18 '14 at 11:11
  • I'm not recommending it, because it will obviously cause other issues with the design, such as having to use 97% height instead of 100% or use hide overflow to avoid the scroll where none should be present, and in most cases where a scroll must be present the background will become unaligned, not to mention that when the browser is resized. But he asked why his "html,.body{}" cheat didn't work, and I replied, promptly, with the correct answer. Personally, I would recommend using javascript to measure the height of the dom and div he wants aligned, but he didn't ask for that. – verthandi Dec 18 '14 at 11:19
  • 1
    To remove scrollbars you need to reset the default body margins so the height is 100% :) – Bojan Petkovski Dec 18 '14 at 11:31
  • to be prompt and not be correct is way more harmful than helpful. – kumarharsh Dec 19 '14 at 06:08