Как сделать div заполнить его контейнер со 100% шириной и высотой?

Question

Я создаю текстовый редактор, и я работаю над размером моего div. К сожалению, он не занимает всю страницу. Его width и height установлены на 100%. Вот CSS:

html, body { 
    position:absolute; 
    z-index:1; 
    top:0px; 
    left:0px; 
} 

Если вы хотите просмотреть страницу, вы можете увидеть его here. Большое вам спасибо за вашу помощь.

Answer 1

Причина, по которой не занимают всю высоту, потому что родительские объекты скорее всего, не на 100%, как вам хотелось бы. Перед стилем контейнера введите следующий код:

html,body{ 
width: 100%; 
height: 100%; 
} 

Answer 2

Обязательно включите margin: none; и padding: none; в своих первоначальных заявлений для html и body:

html, body { 
    position:absolute; 
    z-index:1; 
    top:0px; 
    left:0px; 
    margin: none; 
    padding: none; 
} 

Answer 3

Дайте высоту editBox а, которая равна разности с высоты выше элемента. Установите для поля margin, padding значение 0 для элементов html и body, чтобы избежать переполнения.

#editBox { 
    height: calc(100% - 30px); 
} 

html, body { 
    margin: 0; 
    padding: 0; 
} 

Answer 4

Я изменил его немного

html, 
body, 
.container { 
    position: absolute; 
    margin: 0; 
    top: 0px; 
    left: 0px; 
    bottom: 0px; 
    right: 0px; 
} 

.header { 
    height: 30px; 
    vertical-align: middle; 
    border: 1px solid black; 
    border-bottom: 0px; 
} 

#editBox { 
    height: calc(100% - 33px); 
    border: 1px solid black; 
    font-family: 'Open Sans'; 
    overflow: scroll; 
} 

img.icon { 
    width: 15px; 
} 

Здесь

http://jsfiddle.net/link2twenty/y9esbeLc/