1
我正在尝试使用新的css3 flexbox模型进行布局。我想要一个占据100％高度的页面，使用一个固定的页脚和页眉，剩下的内容位于中间的一列。内容列应该占据宽度的100％，直到固定的最大宽度。另外，一切都应该在中心对齐。最大宽度不适用于Firefox的灵活框模型？
我设法完全按照this demo的规范来构建它，这在Chrome或任何基于webkit的浏览器中都很出色。但它在Firefox中打破了，在这里添加“max-width”属性使得所有的东西都是一个固定的列向左对齐。
任何人都可以让我知道为什么这不是在Firefox中工作？这是对规范的不同解释，还是它是我的代码中的错误？
这是演示的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; }