2014-11-07 2 views
0

У меня проблема с визуализацией между Firefox и Chrome, и я не знаю, почему, я пробую кое-что, но он отлично работает в firefox, но высота размера статьи не работает как я ожидал:Div высота работает на firefox, но не на chrome

\t *{ 
 
\t \t border: 0px; 
 
\t \t margin: 0px; 
 
\t \t padding: 0px; 
 
\t } 
 
\t body, html{ 
 
\t \t height: 100%; 
 
\t \t width: 100%; 
 
\t \t margin: 0px; 
 
\t \t padding: 0px; 
 
\t } 
 
\t #main { 
 
\t height: 80%; 
 
\t display: -webkit-flex; 
 
\t display:   flex; 
 
\t flex-flow: row; 
 
\t } 
 
\t #main section { 
 
\t \t background: #CFC; 
 
\t \t flex: 3 1 60%; 
 
\t \t order: 2; 
 
\t } 
 
\t #main nav { 
 
\t \t background: #CCF; 
 
\t \t flex: 1 6 20%; 
 
\t \t order: 1; 
 
\t } 
 
\t #main aside { 
 
\t \t background: #CCF; 
 
\t \t flex: 1 6 20%; 
 
\t \t order: 3; 
 
\t } 
 
\t header, footer { 
 
\t \t display: block; 
 
\t \t min-height: 10%; 
 
\t \t background: #FC6; 
 
\t } 
 
\t #header, #footer { 
 
\t \t display: block; 
 
\t \t min-height: 10%; 
 
\t \t background: #CCC; 
 
\t } 
 
\t #article{ 
 
\t \t display: block; 
 
\t \t height:80%; 
 
\t } 
 
\t #content{ 
 
\t \t height:100%; 
 
\t \t width: 100%; 
 
\t \t background: #FFF; 
 
\t }
\t \t <header>&lt;header&gt; 
 
\t \t </header> 
 
\t \t <div id="main"> 
 
\t \t \t <nav>&lt;nav&gt; 
 
\t \t \t </nav> 
 
\t \t \t <section> 
 
\t \t \t \t <div id="content"> 
 
\t \t \t \t \t <div id="header">&lt;header&gt; 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div id="article">&lt;article&gt; 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div id="footer">&lt;footer&gt; 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </section> 
 
\t \t \t <aside>&lt;aside&gt; 
 
\t \t \t </aside> 
 
\t \t </div> 
 
\t \t <footer>&lt;footer&gt; 
 
\t \t </footer>

+1

по теме: вам не нужно иметь 'px' если что-то '0', например:' поле: 0; 'и границы вы можете' границы: нет; ' – zxc

+0

Что именно это ВАШ проблема? –

+0

div #content не имеют полного размера родительского элемента в chrome, имеет минимальный размер внутри divs, но в firefox он имеет (как я хочу) – togarha

ответ

1

Просто добавьте height:100% в #main section так:

*{ 
 
\t \t border: 0px; 
 
\t \t margin: 0px; 
 
\t \t padding: 0px; 
 
\t } 
 
\t body, html{ 
 
\t \t height: 100%; 
 
\t \t width: 100%; 
 
\t \t margin: 0px; 
 
\t \t padding: 0px; 
 
\t } 
 
\t #main { 
 
\t height: 80%; 
 
\t display: -webkit-flex; 
 
\t display:   flex; 
 
\t flex-flow: row; 
 
\t } 
 
\t #main section { 
 
\t \t background: #CFC; 
 
\t \t flex: 3 1 60%; 
 
\t \t order: 2; 
 
\t \t height:100%; 
 
\t } 
 
\t #main nav { 
 
\t \t background: #CCF; 
 
\t \t flex: 1 6 20%; 
 
\t \t order: 1; 
 
\t } 
 
\t #main aside { 
 
\t \t background: #CCF; 
 
\t \t flex: 1 6 20%; 
 
\t \t order: 3; 
 
\t } 
 
\t header, footer { 
 
\t \t display: block; 
 
\t \t min-height: 10%; 
 
\t \t background: #FC6; 
 
\t } 
 
\t #header, #footer { 
 
\t \t display: block; 
 
\t \t min-height: 10%; 
 
\t \t background: #CCC; 
 
\t } 
 
\t #article{ 
 
\t \t display: block; 
 
\t \t height:80%; 
 
\t } 
 
\t #content{ 
 
\t \t height:100%; 
 
\t \t width: 100%; 
 
\t \t background: #FFF; 
 
\t }
\t \t <header>&lt;header&gt; 
 
\t \t </header> 
 
\t \t <div id="main"> 
 
\t \t \t <nav>&lt;nav&gt; 
 
\t \t \t </nav> 
 
\t \t \t <section> 
 
\t \t \t \t <div id="content"> 
 
\t \t \t \t \t <div id="header">&lt;header&gt; 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div id="article">&lt;article&gt; 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div id="footer">&lt;footer&gt; 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </section> 
 
\t \t \t <aside>&lt;aside&gt; 
 
\t \t \t </aside> 
 
\t \t </div> 
 
\t \t <footer>&lt;footer&gt; 
 
\t \t </footer>

+0

Perfect ... Спасибо – togarha