1

シンプルなアダプティブ html+css レイアウトを作成しました。その意味は、ページ ブロックのコンテンツに関係なく、コンテンツを含むメイン ブロックの内側、下部が常に「くぎ付け」されているということです (コンテンツが空である可能性があります)。css flex でのデザインを実現しました。Firefox、IE でコンテンツブロックが空の場合、フッターが正しく表示されます (ブラウザ ウィンドウの下部に貼り付けられます)。しかし、Chrome または Opera で開くと、ヘッダー ブロックの高さについて、フッターがブラウザー ウィンドウから下にスライドします (ブラウザー ウィンドウの下部にはくっつきません)。

原因がわかりません。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>

ppps Firefox (正しい) と Chrome (正しくない) のスクリーンショットを以下に示します。

Firefox: Mozilla Firefox - スクリーンショット

Chrome: Google Chrome - スクリーンショット

4

2 に答える 2

0

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;
}
于 2016-01-29T12:52:13.773 に答える