html ширина высота 100%

Question

У меня есть css, как это

.home{        
    height:100%;
    width:100%; 
    font-size:20px;     
}

и у меня есть HTML, как это

<div class="home">
        <div style="text-align:center;padding-top:10%;height:45%;">first text here
        </div>
        <div style="padding-top:2%;height:33%;background:#0099FF;text-align:center;">second text here           
        </div>      
        </div>  

но когда я запускаю этот код в веб-браузере, высота не соответствует 100%, он отображает более 100% в CSS, я устанавливаю домашний класс: высота 100% в HTML, я делаю 2 div.set style = 10%+45%+2%+33% = 90%

но когда я запускаю в веб-браузере это более 100% (я могу прокрутить мышь вниз)

я хочу 100% высоты, есть

Answer 1

Некоторые браузеры добавляют свои собственные отступы. Попробуйте сбросить отступы, поля глобально

* {margin:0;padding:0;}

Вы также можете добавить их туда вместе с отступом и полем, если поддержка IE7 не требуется. Это сделает расчеты намного проще

 -webkit-box-sizing: border-box; /* <=iOS4, <= Android  2.3 */
 -moz-box-sizing: border-box; /* Firefox 1+ */
      box-sizing: border-box; /* Chrome, IE8+, Opera, Safari 5.1*/