мой ребенок div не наследует рост 100%

Question

У меня есть некоторые проблемы с установкой дочернего div (contentwrapper) на 100% высоты, когда родительский div (wrapper) установлен на 100%.

есть идеи почему?

цель этого макета:

100% фиксированный заголовок ВЛЕВО, 100% ВПРАВО 100% нижний колонтитул (но всегда внизу)

любая помощь приветствуется.

спасибо,

<form>
<div id="wrapper">
<header>
<div id="header">my header</div>
</header>
<div id="contentwrapper">some other items</div>
<footer>
<div id="footer">my footer</div>
</footer>
</div>
</form>


html, body, form {
border: 0;
margin: 0;
height: 100%;
_height: 100%;
width: 100%;
}

#wrapper {
    background-color: #DDDDDD;
    height: auto !important;
    height: 100%;
    margin: 0;
    min-height: 100%;
    position: relative;
    width: 100%;
}

#header {
    height: 50px;
    background-color: #666;
    width: 100%;
    _width: 100%; /* ie6 */
    z-index: 100;
}

#footer {
    width: 100%;
    background-color: #CCC;
    position: absolute;
    bottom: 0 !important;
    bottom: -1px;
    height: 40px;
    clear: both;
}

#contentwrapper {
    height: 100%;
    min-height: 100%; 
    background-color: Yellow;
}

Answer 1

Первое, на что я хочу обратить внимание, это то, что при стилизации DIV или чего-либо с помощью CSS3 хорошее правило - всегда делать это по классам, чтобы вы могли назначать классы нескольким элементам и использовать их повторно, чтобы избежать повторяющегося кода.Идентификаторы больше предназначены для нацеливания на объекты, и их раздельное сохранение избавит от головной боли, если и когда вы изучите jQuery / javascript.

Что вам нужно сделать при создании div 100% высоты, это назначить элементы html и body для height:100%.Все, что находится внутри тела, должно иметь минимальную высоту 100%.Высота не сработает, это просто еще один странный обходной путь для CSS.Кажется, у вас есть это внизу, но повторяющееся свойство высоты конфликтует и запутывает вещи.

Проблема с тем, что нижний колонтитул не прилипает к нижней части страницы, состоит в том, что он расположен абсолютно внизу.Если вы измените это на фиксированное, оно будет прикреплено к нижней части окна браузера.Это 40px, так что не забудьте добавить 40px отступа в конец контент-оболочки, чтобы избежать покрытия контента

Также я вижу, как вы меняете поля / отступы в вашем CSS.Хорошим инструментом была таблица стилей сброса CSS, чтобы включить ее во все страницы, созданные Эриком Мейером.Вы можете найти его здесь:

http://meyerweb.com/eric/tools/css/reset/

Это позволит выровнять игровое поле для раздражающих стилей по умолчанию для различных свойств во всех браузерах.

Надеюсь, я понял ваши вопросы иэто помогло.