2013-03-17 2 views
2

У меня есть 2 div s. Я дал первый height из 70px и теперь хочу 2 0ddiv, чтобы заполнить оставшееся пространство веб-страницу. Это должно относиться к первому div. Ниже мой код: (В 2 div s являются header и content)Автоматическая регулировка высоты divs для заполнения оставшегося пространства

* { 
    margin: 0px; 
    padding: 0px; 
} 

#header { 
    background-color: #1874CD; 
    width: 100%; 
    height: 70px; 
} 

#name { 
    color: #ffffff; 
    padding: 10px 10px 10px 10px; 
    font-size: 35px; 
    font-weight: bold; 
    font-family: Calibri; 
} 

#content { 
    background-color: #F5F5F5; 
    width: 100%; 
    height: 650px; 
} 

ответ

2

Как насчет делать что-то вроде этого (JSfiddle example):

#header{ 
    background-color: #1874CD; 
    width: 100%; 
    height: 70px; 
    z-index: 2; 
    position: relative; 
} 


#content{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    background-color: #F5F5F5; 
    width: 100%; 
    height: 100%;  
    padding-top: 70px; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box; 
} 
+0

Спасибо большое! :) – Neville

+0

, так как в коробке может понадобиться дополнение, я предпочитаю другое решение: top: 70px; bottom: 0px; и вы можете оставить высоту. – memical

Смежные вопросы