誠的碼記本

最近發現了css有display: flex這個好東西
可以在切板時做更靈活的調整，而且可以在完全不須用到JavaScript的情況下做到自動調整元素高度適應瀏覽器
在一番研究琢磨之後終於完成了，在此紀錄一下作法
--------------------------------------------------------------------------------
HTML部分---

<div id="app">
    <header>
    </header>
    <div id="center">
        <nav>
            <ul>
                <li><router-link to="/page1">前往第一頁</router-link></li>
                <li><router-link to="/page2">前往第二頁</router-link></li>
            </ul>
        </nav>
        <main>
            <router-view>
            </router-view>
        </main>
    </div>
    <footer>
    </footer>
</div>

我知道裡面混了一些奇怪的東西，但這並不影響排版結果，如果有興趣請去Google關鍵字"Vue.js"

再來是CSS的部分---
 

html, body {
    margin: 0px;  /*去外距*/
    height: 100%; /*自動填滿瀏覽器高度*/
}

#app {
    height:inherit; /*自動填滿瀏覽器高度*/
    /*第一層flex--header、center、footer標籤垂直排列*/
    display: flex;
    flex-direction: column;
}

header {
    height: 50px; /*第一層flex--header固定高度*/
    background-color: #3490C5;
}

#center{
    flex: 1; /*第一層flex--center中間包含nav與main填滿剩餘高度*/
    display: flex; /*第二層flex--將nav與main標籤水平排列*/
}

nav {
    min-width: 150px; /*第二層flex--nav固定寬度*/
    background-color: #9ED0E8;
}

main {
    flex: 1; /*第二層flex---main填滿剩餘寬度*/
    background-color: #DAE6EC;
}

footer {
    height: 50px; /*第一層flex--footer固定高度*/
    background-color: #3490C5;
}

可以在此預覽排版結果---
https://codepen.io/anon/pen/ymVKpa