固定側邊欄有一個溢出的內容和一個固定的內容

Question

我正在做一個簡單的佈局，但有一件事是糾纏我。 我想要一個包含兩列，全高，側邊欄和內容的佈局。 側邊欄裏面，我想兩件事情：

將被定位在底部

• 一個按鈕，固定高度。
• 一格將在剩餘的空間，流體高度居中。

我嘗試成爲IE 9兼容。

這是基本的佈局：

<aside> 
    <div class="wrapper"> 
    <nav> 
     <ul> 
     <li>Item menu</li> 
     <li>Item menu</li> 
     <li>Item menu n</li>   
     </ul> 
    </nav> 
    </div> 
    <a class="btn"> 
    button must be at the bottom 
    </a> 
</aside> 
<main> 
    My content 
</main> 

而且基本的CSS：

* { margin:0; padding: 0; box-sizing:border-box; } 
html, body { height: 100%; } 
aside, main { height: 100%; } 
aside { 
    position:fixed; 
    left:0; 
    top:0; 
    width: 200px; 
    background:#eee; 
} 
main { 
    width: calc(100% - 200px); 
    margin-left:200px; 
} 

現在，什麼我嘗試當窗口的高度是小有問題的結果。 （在菜單按鈕，或者根本沒有滾動的菜單，等...）

什麼，我tryed：

• aside{display:table}，.wrapper{display:tablle-cell; vertical-align:middle}與.btn{position: fixed; bottom:0; left:0;}
• nav{top:50%; transform:translateY(-50%);}但後來，有一個點導航的內容將在視口的頂部...
• 和一點flexbox，但我could'nt達到想要的結果。

如果您需要更多信息，我會非常歡迎您給他們。 謝謝。

Answer 1

這應該有助於你開始。

UPDATED

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    display: flex; 
 
    height: 100vh; 
 
    overflow: hidden; 
 
} 
 

 
aside, 
 
main { 
 
    /* height: 100%; */ 
 
    /* width: 100%; */ 
 
} 
 

 
aside { 
 
    flex-grow: 1; 
 
    background: #eee; 
 
    padding: 5px; 
 
} 
 

 
main { 
 
    flex-grow: 6; 
 
    background: #ddd; 
 
    padding: 20px; 
 
    height: 100vh; 
 
    overflow-y: scroll; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    height: 100vh; 
 
    justify-content: space-between; 
 
    flex-direction: column; 
 
} 
 

 
.btn { 
 
    margin: 20px auto; 
 
    background: #bada55; 
 
    padding: 20px; 
 
}

<aside> 
 
    <div class="wrapper"> 
 
    <nav> 
 
     <ul> 
 
     <li>Item menu</li> 
 
     <li>Item menu</li> 
 
     <li>Item menu n</li> 
 
     </ul> 
 
    </nav> 
 
    <a class="btn"> 
 
button 
 
    </a> 
 
    </div> 
 

 
</aside> 
 
<main> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum 
 
    dolor sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor 
 
    sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, 
 
    consectetur adipisicing elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur 
 
    adipisicing elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing 
 
    elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
    Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque 
 
    ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati 
 
    eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati eveniet 
 
    distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati eveniet distinctio 
 
    provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.</p> 
 
</main>