Div height 100% вызывает проблемы с переполнением

Недавно я решил вырезать столы и пойти с решением div в этом новом проекте, однако у меня возникает очень странная проблема при установке div внутри другого div на 100% без его переполнения равный высоте div над ним. Он действует так, как будто браузер не знает, что div находится над ним, занимая это пространство.Div height 100% вызывает проблемы с переполнением

У меня есть обертка div с фиксированной шириной и высотой, установленной на 100%, внутри которой находятся три столбца (слева, в середине и справа) в середине столбца. У меня есть 3 div, верхние 2 имеют фиксированные высоты 90px и 3-я установка установлена на 100%, чтобы заполнить остальную часть области содержимого, но она вырвалась из обертки div и вызвала ровно 180px переполнение. Я настроить этот простой макет на JSFiddle: Height: 100% Div Issue

<body> 
<div class="wrapper"> 
    <div class="left"> 
     <div style="background-color:fuchsia; height: 90px;">&nbsp;</div> 
    </div> 
    <div class="mid"> 
     <div style="background-color:purple; height: 90px; width: 998px;">&nbsp;</div> 
     <div style="background-color:blue; height: 90px; width: 998px;">&nbsp;</div> 
     <div style="background-color:black; height: 100%; width: 50%;">&nbsp;</div> 
    </div> 
    <div class="right"> 
     <div style="background-color:fuchsia; height: 90px;" class="right">&nbsp;</div> 
    </div> 
</div>

Вы заметите черный ДИВ вспыхивают желтого (в середине) DIV, это не должно было произойти! Любая помощь будет принята с благодарностью. Благодаря!

источник

2013-06-19 bfritz

Это то, что решение таблица выглядит то, что я пытаюсь сделать: <таблица стилей = "ширина: 100%; высота: 100%;"> \t \t \t <тд стиль = "высота: 90px"> \t \t \t \t <тд стиль = "высота: 90px"> \t \t \t \t <тд стиль = "высота: 100%"> \t Почему метод ДИВ гораздо труднее? – bfritz

http://jsfiddle.net/KtUgF/7/ –

@MarcoGeertsma Я не вижу никаких обновлений на этой скрипке? – bfritz

Вы указываете высоту 100% на черном div, которая заканчивается относительно ее родителя (.mid), который также содержит другие элементы, которые вы дали 90px высоты. Вы должны учитывать этих двух братьев и сестер.

Вы можете сделать это, используя нотацию calc(), хотя поддержка мобильного браузера плохая и функция не поддерживается в IE8 & ниже.

http://jsfiddle.net/KtUgF/5/

Вы также можете использовать отрицательный сверху запас на черный DIV, равный сумме обоих своих братьев и сестер (180px):

http://jsfiddle.net/yrfnc/

источник

2013-06-19 00:37:30 Adrift

Спасибо за ответ Дрейф, к сожалению, мне нужна поддержка IE8, и настройка верхнего уровня кажется такой взломанной, чтобы сделать что-то довольно прямое (я бы подумал). Этот черный div происходит по основной области содержимого, поэтому, как только я начну заполнять его данными, мне пришлось бы проложить все это вниз + 180px, чтобы противостоять настройке отрицательного верхнего поля. – bfritz

Тогда вам нужно будет использовать JS или пересмотреть свой макет. – Adrift

Любая причина, почему вы можете» t просто добавить переполнение: скрыто в div .mid?

<div class="mid" style="overflow:hidden">

или

.mid { 
    float: left; 
    width: 998px; 
    height: 100%; 
    background-color: yellow; 
    overflow: hidden; 
}

источник

2013-06-19 01:01:28 LouD

Вот скрипка для обновления: http://jsfiddle.net/LfzSq/ – LouD

Потому что эта область - мой основной контент div. И мне нужно разместить в нем много другого пользовательского интерфейса. Просто установив переполнение в скрытое, я бы скрывал свой контент! Мне нужно, чтобы это было правдой для фактического пространства на экране, чтобы оно могло расширяться вертикально, даже если это необходимо, и не иметь прокрутки внутри самого div. – bfritz

Тогда вам все равно понадобится прокладка, как вы упомянули, для трюка с отрицательным краем. Если вы не хотите, чтобы черный div имел ту же высоту, что и его родитель, вы должны удалить высоту 100%. Если ваша цель состоит в том, чтобы стилизовать левую половину желтого div, всегда есть другие способы сделать это (даже используя фоновое изображение). – LouD

Div height 100% вызывает проблемы с переполнением

ответ

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