Процент высоты divs в IE и FireFox

Я знаю, что этот вопрос задан очень много, но я все еще не получаю это для работы. Кроме того, я пробовал vh вместо%, но он не масштабируется по проценту.Процент высоты divs в IE и FireFox

Я пытаюсь создать коробку с черным фоном, вертикально выровненную в желтом div. Если вы измените высоту в inner-left-bracket-div, тогда вы сможете получить фоном, идеально выровненным. Но я хочу, чтобы он был на 50% в высоту, а не со статическим значением.

Возможно ли это?

HTML

<div class="left-bracket-div"> 
     <div class="inner-left-bracket-div"></div> 
    </div> 
<div class="bracket-match"> 
</div>

CSS

.left-bracket-div{ 
    display: table-cell; 
    width: 10px; 
    height: 100%; 
    background: yellow; 
    vertical-align: middle; 
    text-align: center; 
} 

.inner-left-bracket-div { 
    width: 100%; 
    height: 50%; 
    background: black; 
} 

div.bracket-match { 
    display: table-cell; 
    width: 100px; 
    height: 300px; 
    background: gray; 
    vertical-align: middle; 
    text-align: center; 
}

Вот demo

OBS: я добавил 100% в высоту до тела, HTML и формы. Все еще никаких результатов.

источник

2015-04-20 Casper Nybroe

ли внутренний DIV есть содержание, или это не содержание вообще? – Huangism

Вы можете определить высоту '.left-bracket-div' (родительский элемент целевого div) в пикселях? Если так, то это сработает. – nvioli

Внутренний div будет содержать некоторое содержимое, генерируемое угловым - так что да. Я не могу определить высоту в px '.left-bracket-div', потому что мое решение масштабируется для каждого узла, сгенерированного угловым. –

Если вы назначаете определенную высоту .left-bracket-div, она будет работать. Попробуйте поменять из

height: 100%;

для

height: 300px;

http://jsfiddle.net/mcSfe/2977/

источник

2015-04-20 19:35:21 nvioli

Спасибо Nvioli. Это работает для IE, Safari и Chrome, но не в FF? –

Использование фактической высоты div должно работать на всех. Я избегал этого раньше для большей гибкости, но если вы определяете высоту в '.bracket-match', возможно, это не проблема? – nvioli

-1

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

Только что наткнулся на это, хотел поделиться им. Работы меня интересуют: http://joaocunha.github.io/vunit/

Возможно, потому что я беспокоился, что не понял, как это сделать в первую очередь. В случае, если это полезно для кого-то другого, вот простой пример.

Вы определяете, какой процент вы хотите, чтобы он был в самом классе (в примере class = "header50" означает 50%. Если я просто изменил его на class = "header100", он будет на 100%). В то время как в сценарии определяется как «.header» только

<head> 
<script src="path/to/vunit.js"></script> 
<script> 
    new vUnit({ 
     CSSMap: { 
     '.header': { 
      property: 'height', 
      reference: 'vh' 
     } 
     }  
    }).init(); 
</script> 
</head> 

<div id="header" class="header50">Header 50%</div>

источник

2016-05-27 10:33:16 EAR

Процент высоты divs в IE и FireFox

ответ

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