Как присвоить процентные значения div для деления всей страницы на 3 части с ростом тела = высота окна

Я хочу создать 3 div таким образом, чтобы вся страница имела размер окна (т.е. страница не должна прокручиваться) и каждый div должен иметь высоту в процентах от всей высоты. Как присвоить процентные значения div для деления всей страницы на 3 части с ростом тела = высота окна

например

|--------------------------------------| 
|  Body height=window's height  | 
| |----------------------------------| | 
| |  Header height:10%   | | 
| |----------------------------------| | 
| |         | | 
| |  Content height:85%  | | 
| |         | | 
| |         | | 
| |----------------------------------| | 
| |  Footer height:5 %   | | 
| |----------------------------------| | 
|--------------------------------------|

Вот код, который я использовал без успеха

<body style="width: 100%; height:100%"> 
<div style="width: 100%; height:100%;"> 
    <div id="headerDiv" style="width: 100%; height:10%; background-color: #ff0000"> 
     <!-- some content --> 
    </div> 
    <div style="width: 100%; height:85%;" > 
     <!-- some content --> 
    </div> 
    <div style="width: 100%; height:5%" > 
     <!-- some content --> 
    </div> 
</div> 
</body>

источник

2013-05-07 rdp

Вам не нужно указывать ширину: 100% для всех div. По умолчанию ширина div равна 100%. А для высоты определите тело и html до 100%, как это определит г-н Алиен. – Tarun

ли вам нужно что-то вроде этого?

Demo

html, body { 
    height: 100%; 
} 

div:nth-of-type(1) { 
    background: #f00; 
    height: 20%; 
} 

div:nth-of-type(2) { 
    background: #00f; 
    height: 70%; 
} 

div:nth-of-type(3) { 
    background: #0f0; 
    height: 10%; 
}

Я думаю your solution will also work, но вы должны пропустили сброс стилей браузера по умолчанию, используйте это в CSS и вы пропустили настройки height: 100%; для html элемента слишком

* { 
    margin: 0; 
    padding: 0; 
}

источник

2013-05-07 08:09:27

Спасибо. Я использовал ваши предложения по моему решению, и теперь он работает. – rdp

Я не могу выдвигать больше, чем один раз, но если бы мог, я бы это сделал. Спасибо, ты спасатель! – molli

Попробуйте изменить значение высоты на PX:

<body style="width: 100%; height:100%"> 
<div style="width: 100%; height:1000px;"> 
    <div id="headerDiv" style="width: 100%; height:10%; background-color: #ff0000"> 
     <!-- some content --> 
    </div> 
    <div style="width: 100%; height:85%;" > 
     <!-- some content --> 
    </div> 
    <div style="width: 100%; height:5%" > 
     <!-- some content --> 
    </div> 
</div> 
</body>

источник

2013-05-07 08:16:31 kirk

Как присвоить процентные значения div для деления всей страницы на 3 части с ростом тела = высота окна

ответ

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