2014-11-07 4 views
0

Firefox와 Chrome 간의 시각화에 문제가 있으며 그 이유를 모르지만 파이어 폭스에서 잘 작동하지만 기사의 높이 크기가 작동하지 않습니다. 내가 예상대로 :Div 높이가 파이어 폭스에서는 작동하지만 크롬에서는 작동하지 않음

\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

:'마진 : 당신이 뭔가 예를 들어, '0'인 경우 'px'을 할 필요가 없습니다 0;'및 테두리 당신은'국경 할 수 없음;'이 정확히 무엇 없습니다 – zxc

+0

문제? –

+0

div #content 크롬에 상위 크기는 없지만 div의 내부 크기는 최소이지만 firefox에 있습니다 (원하는대로) – togarha

답변

1

를 그냥 같이 #main sectionheight:100%을 추가

*{ 
 
\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

완벽한 ... 고마워요. – togarha

관련 문제