DIV не принимает родительскую высоту 3 колонки

<div class='main_container' style='overflow:hidden; height:100%; height: auto !important; min-height:100%; width:100%;'> 
    <div class='float_left' style='width:100px; height:100%;'> 
    </div> 
    <div class='float_right' style='width:100px;'> 
    </div> 
    <div class='clear'></div> 
    <div class='content'> 
     //elastic content that sometimes makes the page longer or shorter 
    </div> 
</div>

Независимо от того, сколько учебников или примеров я смотрел, мне ничего не помогает. Я пробовал много разных комбинаций. Как только я установил main_container на высоту px, боковые панели тогда, правильно, занимают 100% высоты. Но я не могу установить высоту px для основного контейнера.DIV не принимает родительскую высоту 3 колонки

EDIT:

example

коробка содержание не будет иметь статическую высоту. Пока что происходит то, что main_container настраивает его высоту на основе поля содержимого, но две боковые панели не регулируют высоту, основанную на высоте main_containers.

источник

2013-07-30 user2444539

Что вы пытаетесь достичь именно. Дивы будут автоматически изменяться в зависимости от того, что внутри них. – Jacques

разве я не видел этот точный вопрос вчера? Можете ли вы представить каркасное изображение того, что вы хотите отобразить? –

Milche, я обновил OP с помощью wireframe – user2444539

Это решение использует таблицы ячеек CSS, которые позволяют левые/правые боковые панели, чтобы взять на высоту центральной панели .content.

HTML-:

<div class='main_container'> 
    <div class='left_bar'></div> 
    <div class='content'> 
     <p>Elastic content that sometimes makes the page longer or shorter</p> 
     <p>Lorem ipsum dolor sit amet, ...</p> 
    </div> 
    <div class='right_bar'></div> 
</div>

CSS-:

.main_container { 
    display: table; 
    width: 100%; 
} 
.left_bar { 
    display: table-cell; 
    width: 100px; 
    background-color: lightgray; 
} 
.right_bar { 
    display: table-cell; 
    width: 100px; 
    background-color: lightgreen; 
} 
.content { 
    padding: 0 20px; 
}

Demo Fiddle: http://jsfiddle.net/audetwebdesign/zahPD/

Как было предложено в других комментариях, вы можете указать height: 100% или height: inherit к .main_container в соответствии с требованиями вашего заявление.

Ссылка для table-cell: https://developer.mozilla.org/en-US/docs/Web/CSS/display

Backwards Совместимость
Работает с IE8 и выше.

источник

2013-07-30 20:14:07

Я думаю, что последним прикосновением было бы добавить 'height: 100%' to '.main_container', поскольку это казалось желаемым результатом. – adrenalin

Это сработало. Хотя, я всегда слышал, что таблицы - неправильный способ сделать что-то? Спасибо anyways, хотя, я работал все утро на этом .. – user2444539

Есть ли способ плавать баров? – user2444539

В дополнение к ответу Adrift вы также переопределяете height: 100% следующим height: auto !important - последний переопределяет настройку высоты, даже если это не является источником проблемы.

Here is a Gist, который работает на Chrome и, скорее всего, также на других современных браузерах.

источник

2013-07-30 19:52:00 adrenalin

Downvoted за предложение '! Important', так как я считаю это плохой практикой кодирования –

Вы правильно читали, что я сказал? Я не предлагал использовать его, но указал, что он его использовал. – adrenalin

Sry ... late night, upvoted –

Div не поддерживает высоту в процентах, используя документ xhtml. Вы можете использовать трюк, как это:

.main_container{ 
    position:fixed; 
    top:0;bottom:0; 
    right:0;left:0; 
}

Я пишу пример здесь: http://jsfiddle.net/vF6fY/ взглянуть на него

источник

2013-07-30 19:52:13 Lwyrn

Это сделало мой main_container и все содержимое внутри него disapear – user2444539

http://jsfiddle.net/vF6fY/ – Lwyrn

DIV не принимает родительскую высоту 3 колонки

ответ

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