CSS - макет высоты 100% с заголовком переменной высоты

Макет, который я хочу достичь, довольно прост. Я хочу компоновку высот 100% с заголовком, а под заголовком у меня будет боковая панель для навигации, а затем область содержимого рядом с панелью навигации (2 столбца с заголовком). Я могу легко сделать это, если я дам заголовку указанную высоту, но хочу, чтобы заголовок занимал столько места, сколько необходимо. Кто-нибудь знает как это сделать? Возможно ли это без знания высоты заголовка?CSS - макет высоты 100% с заголовком переменной высоты

Спасибо за любую помощь.

источник

2010-06-03 Brian DiCasa

-1

Это должно сделать это

<style type="text/css" media="screen"> 
body 
{ 
    margin: 0; 
    padding: 0; 
    height: 100%; /* this is the key! */ 
    width: 100%; 
} 
#container 
{ 
    position: fixed; 
    height: 100%; 
    width: 100%; 
    background: #eaeaea; 
} 
#header 
{ 
    background: #000000; 
} 
</style> 

<body> 
    <div id="header"> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    </div> 
    <div id="container"> 
    <table width="100%" style="height: 100%;"> 
     <tr> 
     <td style="background: #ff0000; width: 250px;"> 
      col1 
     </td> 
     <td style="background: #00ff00;"> 
      col2 
     </td> 
     </tr> 
    </table> 
    </div> 
</body>

источник

2010-06-03 21:06:45 alejandrobog

Согласовано. Причина, по которой 100% -ная высота тела является ключевой, заключается в том, что без нее браузер не может вычислить, что 100% означает для #container и по умолчанию используется высота окна браузера, чего вы не хотите. Вероятно, стоит обратить внимание на важность объявления высоты тела (высота: 100%! Important;) и/или полезный комментарий, чтобы будущие разработчики знали, что им не нужно возиться с ним. –

Спасибо! Для других, кто пытается это сделать, поскольку alejandrobog и Dan M упоминают, что 100% на теле является ключевым. Дело в том, что это было положение: зафиксировано на контейнере. –

Для чего это стоит, этот макет фактически скрывает нижнюю часть таблицы (по-видимому, такие же размеры, как высота заголовка). Поэтому я бы не сказал, что это решение проблемы с заголовком переменной высоты. –

CSS - макет высоты 100% с заголовком переменной высоты

ответ

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