html - 基于 FLEX 的自适应跨浏览器 CSS 设计。为什么 Chrome 和 Opera 显示不正确？

Question

我创建了一个简单的自适应 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 屏幕截图如下

火狐： Mozilla Firefox-截图

Chrome：谷歌浏览器 - 屏幕截图

score 0 · Accepted Answer

问题来自在 childs 中使用 height 和 flex 。

.flexBlock{
    height: 100%;/* <=== HERE remove it!, it disturbs childs layout */
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}

使用其中一种，最好使用 flex而不是 height，它会自行调整大小。（参见样式表中的注释）

只有主容器需要调整大小，子容器将遵循 flex 属性

html, body, body>div { /* here add main container for 100% heights */
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
    margin: 0;
    padding: 0;
}

/*
 *   Main StyleSheets
 */

/* -- MAINBODY STYLES -- */
html, body, body>div { /* here add main container for 100% heights */
    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{
    /* no need of size , flex is taking care of it */
    -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>

在 Opera 和我的 Safari for Windows 中也可以正常工作，我省去了屏幕截图；）

score 0 · Accepted Answer

使用 flex 需要一些新思维来获得你想要的结果。

https://jsfiddle.net/bq37rtwy/

HTML：

<body>
    <div class="flexheader">
    header
    </div>
    <div class="flexcontainer">
        <div class="flexsidenav">
        sidenav
        </div>
        <div class="flexcontent">
            <div class="maincontent">
            content
            </div>
            <div class="maincontentfooter">
            footer
            </div>
        </div>
    </div>
</body>

CSS

html, body {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: red;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

.flexheader {
    height: 70px;
    background-color: yellow;
}

.flexcontainer {
    display: flex;
    background-color: #f1f1f1;
    flex: 1 1 0;
    flex-direction: row;
}

.flexsidenav {
    width: 230px;
    background-color: gold;
}

.flexcontent {
    flex-direction: column;
    display: flex;
    flex: 1 1 0;
    background-color: blue;
}

.maincontent {
    flex: 1 1 0;
}

.maincontentfooter {
    height: 50px;
    background-color: grey;
}

html - 基于 FLEX 的自适应跨浏览器 CSS 设计。为什么 Chrome 和 Opera 显示不正确？

2 回答 2

Related

Reference