1
새로운 css3 flexbox 모델을 사용하여 레이아웃을 만들려고합니다. 나는 고정 높이기의 100 %를 차지하는 페이지를 원한다. 고정 푸터와 헤더가 있고 나머지 내용은 중간에있는 열에있다. 내용 열은 고정 된 최대 너비까지 너비의 100 %를 차지해야합니다. 또한 모든 것이 중심에 정렬되어야합니다.최대 너비가 firefox의 유연한 상자 모델에서 작동하지 않습니까?
나는 정확하게 this demo에있는 spec에 정확하게 그것을 건축하는 것을 크롬 또는 어떤 Webkit 기초를 두는 브라우저에서 잘 작동한다. 하지만 파이어 폭스에서는 "max-width"속성을 추가하면 모든 것이 고정 된 열을 왼쪽으로 정렬하게됩니다.
파이어 폭스에서이 기능이 작동하지 않는 이유는 누구일까요? 그것은 스펙의 다른 해석입니까, 아니면 내 코드의 오류입니까?
이
데모의 HTML입니다 :<div class="container">
<div class="header">Header</div>
<div class="content">
<div class="fixed">
<h1>Title</h1>
<div class="someText">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula sodales risus quis rhoncus. Donec suscipit lorem ante. Nullam tempor, lorem sit amet faucibus dictum, est nisl aliquam felis, a tempor arcu massa sit amet felis. Donec a blandit mi. Sed posuere, lacus eu scelerisque porttitor, turpis sem aliquam nulla, ut rutrum sem libero a felis. Morbi nec sodales odio. Nulla facilisi. Sed consectetur pellentesque arcu, in laoreet nulla semper ac. Pellentesque vulputate sem eget eros condimentum in malesuada dui convallis. Vivamus tristique velit id justo laoreet vestibulum. Nulla orci nisl, vulputate vitae facilisis sit amet, ultricies id massa. Sed eget faucibus magna. Integer a leo sem, hendrerit fermentum libero.</p>
<p>In gravida faucibus dui, quis bibendum est ornare nec. Cras ac metus a dui rhoncus mattis. Nulla ut hendrerit est. Cras sed sem felis, venenatis tincidunt ipsum. Vestibulum id sodales ligula. Nunc sit amet neque vel ante aliquam commodo. Aenean elit felis, imperdiet sagittis lacinia ut, tincidunt accumsan arcu. Vivamus dapibus ligula a est convallis eget tincidunt libero interdum. Nunc mattis, odio et tincidunt egestas, orci ante pharetra nulla, hendrerit ultrices nunc ipsum nec sem. Vestibulum egestas leo pulvinar massa mollis sit amet dapibus velit venenatis. Etiam molestie posuere lacinia. Nam ut nulla elit, ac tincidunt tellus. Nulla mollis metus id ante accumsan et mattis est ultricies. Morbi nec nunc nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="footer">
<div class="fixed">Footer</div>
</div>
</div>
이는 CSS입니다 :
body, html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background:black;
}
.container {
height: 100%;
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
display: -moz-box;
-moz-box-orient: vertical;
}
.header, .footer {
background-color: #32403C;
height: 40px;
width: 100%;
margin: 0;
line-height: 40px;
vertical-align: middle;
text-align: center;
color: #FFF;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
display: -moz-box;
display: -webkit-box;
-webkit-box-flex: 0;
}
.content {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-flex: 1;
-webkit-box-align:center;
-moz-box-align:center;
box-align:center;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
}
.fixed {
background:#787;
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
width:100%;
max-width:480px;
overflow:hidden;
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
}
.someText {
-webkit-mask-image: -webkit-linear-gradient(black, black 75%, transparent 95%);
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
overflow:scroll;
}
.content { background: #876; }
.colorLight { background-color: #A6687B; }
.colorMedium { background-color: #8C605F; }
.colorDark { background-color: #735E5A; }