html, css. Как седлать чтобы дивы растягивались по высоте?

Есть два дива. Оба с высотой 100%. Один находится в другом и смещен на 100px вниз. Так вот, эти 100 пикселей прибавляются ниже и за счет них появляется полоса прокрутки и белая область. как сделать чтобы этого не происходило? А так же если начинаешь добавлять текст, то ни один из них так же не растягивается по высоте. .




index








и css файл:

html, head, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

#content{
background: #aaaaaa;
width: 100%;
height: 100%;
}

#red{
background: red;
width: 500px;
height: 100%;
position: absolute;
top: 100px;
left: 50%;
margin-left: -250px;
margin-bottom: -100px;
}

содержимое боди в хтмлеке:





div заменил на div, а то не хочет отображаться

div заменил на див*