我创建了一个简单的自适应 html+css 布局。它的意思是主块里面有内容,底部一直是“钉”的页脚,不管Page块的内容(内容可能是空的!)。我在css flex上实现了设计。如果内容块为空,则在Firefox,IE中正确显示页脚(粘在浏览器窗口底部)。但是,如果我在 Chrome 或 Opera 中打开,页脚会从浏览器窗口滑出(不会粘在浏览器窗口的底部),大约是 Header 块的高度
我找不到原因,请告诉我 Chrome 和 Opera 浏览器出了什么问题。
ps 请不要使用绝对位置!这就是使用 FLEX 技术的原因。
pps 示例代码(使用“整页”片段!):
/*
* Main StyleSheets
*/
/* -- MAINBODY STYLES -- */
html, body {
width: 100%;
height: 100%;
background-color: #f8f8f8;
margin: 0;
padding: 0;
}
.flexColumnBlock, .flexRowBlock{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.flexRowBlock{
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.flexBlock{
height: 100%;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
.pageBlock{
/* Stylish */
background-color: #67b168;
}
.flexHeader{
/* Properties */
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
/* Stylish */
background: #269abc none repeat scroll 0% 0%;
border-bottom: 1px solid #E6E6E6;
height: 50px;
}
.flexSidebar{
/* Properties */
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 250px;
/* Stylish */
border-right: 1px solid #e7e7e7;
background: #d58512;
}
.flexFooter{
/* Properties */
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
/* Stylish */
background-color: #23527c;
border-top: 1px solid #C4C4C4;
height: 30px;
padding-left: 15px;
padding-right: 15px;
}
.flexMobileMenu{
display: none;
}
/* -- DISPLAY RESOLUTION OPTIMIZATION -- */
/* -- Notebook screens -- */
@media all and (max-width: 750px) {
.flexSidebar {
display: none;
}
.flexMobileMenu{
/* Properties */
display: block;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
/* Stylish */
height: 50px;
border-bottom: 1px solid #e7e7e7;
background: #d58512;
}
.flexBlock > .flexHeader {
height: auto;
}
.flexFooter{
padding-left: 5px;
padding-right: 5px;
}
.pageBlock{
/* Stylish */
padding-top: 5px;
padding-bottom: 5px;
}
}
<body>
<div class="flexBlock flexRowBlock">
<div class="flexBlock flexHeader">Header Block
</div>
<div class="flexBlock flexMobileMenu">Sidebar for mobile view</div>
<div class="flexBlock flexColumnBlock">
<div class="flexBlock flexSidebar">Sidebar block</div>
<div class="flexBlock flexRowBlock">
<div class="flexBlock pageBlock">Page block</div>
<div class="flexBlock flexFooter">Footer block</div>
</div>
</div>
</div>
</body>
来自 Firefox(正确)和 Chrome(不正确)的 ppps 屏幕截图如下
Chrome: 谷歌浏览器 - 屏幕截图