Установите высоту div на 100% родительского

Я хочу следующий макет для моей веб-страницы:

|         header       |
| navigation | details |
|            |         |

Где панель навигации (контент динамически генерируется) содержит сотни элементов. Я хочу, чтобы на панели навигации была создана вертикальная полоса прокрутки, чтобы на панели была высота окна минус высота заголовка.

Моя страница примерно имеет следующую структуру:



  
  

Со следующим CSS:

#navigation {
    float: left;
    width: 400px;
    height: 100%;
    overflow: auto;
}

#details {
    margin-left: 420px;
}

В основном это работает, за исключением того, что панель навигации получает 100% высоты окна, а не 100% высоты окна минус высота заголовка. Я'Я бы не стал явно устанавливать высоту заголовка, если я могу этого избежать. Я совершенно новичок в веб-разработке, поэтому я неНе возражаю читать. Что мне нужно сделать, чтобы получить макет, который я хочу?

 ksindi19 дек. 2011 г., 22:28
Можете ли вы воссоздать вашу проблему с помощью простого jsfiddle (или эквивалентного)?
 Nate03 нояб. 2009 г., 03:19
Переполнение: прокрутка дает тот же эффект. Я вижу заголовок, но полоса прокрутки кажется высотой всего окна, а не высотой только элемента навигации. I '
 NawaMan03 нояб. 2009 г., 02:59
Попробуй использоватьoverflow:scroll для навигатора. Кроме того, вы видите заголовок или контент тоже занимает свое место?
 sfarbota03 нояб. 2009 г., 05:22
Мне любопытно, что вы думаете о том, что не хотите, чтобы заголовок имел высоту?
 NawaMan03 нояб. 2009 г., 03:54
попробуем несколько разных настроек и можемКажется, это поможет вам. Возможно, это один из случаев, когда стол лучше подходит. Просто мысль. Я

Ответы на вопрос(3)

html, body {height: 100%;}

что ваш тег тела и контейнер содержимого также имеют высоту 100%. Вы должны явно установить высоту родительского элемента (ов), чтобы дочерний элемент подчинялся.

body { 
    height: 100%;
} 

#content {
    height: 100%;
}

Это, однако, не принимает во внимание расположение заголовка. В следующем посте демонстрируется метод, использующий быстрый взлом минимальной высоты от Dustin Diaz и отрицательное поле на контейнере содержимого для достижения 100% высоты, не мешая заголовку:

http://www.thechoppr.com/blog/2009/02/08/3-column-fluid-layout-100-height/

 Nate03 нояб. 2009 г., 02:53
Установка высоты тела и содержимого элементов некажется, чтобы помочь. Что вы подразумеваете под "это не учитывает позиционирование заголовка "?

если я могу избежать этого. "Я"Я уверен, что вы можетеИзбегайте этого, не переключаясь на таблицы. Тем не менее, вот пример того, как вы можете сделать это, используя div с заголовкомВысота s установлена на 50 пикселей:


    
        <style type="text/css">
            html, body {
                margin:0;
            }

            div#content {
                position:absolute;
                top:0px;
                z-index:-1;
                width:100%;
            }

            html, body, div#content, div#navigation-shell, div#details-shell {
                height:100%;
            }

            div#header {
                height:50px;
            }

            div#navigation-shell {
                float:left;
                width:400px;
            }

            div#navigation, div#details{
                padding-top:50px;
            }
        </style>
    
    
        <div id="header"></div>
        <div id="content">
            <div id="navigation-shell">
                <div id="navigation"></div>
            </div>
            <div id="details-shell">                
                <div id="details"></div>
            </div>
        </div>
    

Одна запись: Если вы хотите добавить фоны кnavigation и / илиdetails области, вы должны будете на самом деле применить те к их соответствующим div-оболочек, которые их заключают. Однако все действительное содержание будет идти во внутренних делах.

 Nate03 нояб. 2009 г., 16:53
Я сказал, что яя бы не стал устанавливать высоту заголовка, потому что я неЯ не хочу знать это. Мой текущий заголовок страницы - всего лишь 50pt текст, но я мог бы заменить его на рисунок позже. Я надеялся, что я неМне нужно изменять свойство height / padding div навигации каждый раз, когда я меняю заголовок.
 sfarbota03 нояб. 2009 г., 17:09
Я могу понять, что. Тем не менее, фиксированная высота поможет сохранить согласованный макет страницы во всех браузерах. Это может быть своего рода боль, чтобы изменить заголовок "Высота, когда вы меняете его содержимое, но как только вы выбираете заголовок, который вам нравится, вы выигрываетебольше не нужно об этом беспокоиться. Это все, конечно, зависит от вас, но яЯ совершенно уверен, что авторазмер заголовка div с двумя полноэкранными div ниже невозможен без ошибки.

Ваш ответ на вопрос