粘滯的頁眉和頁腳與自動滾動內容

Question

我想做一個頁眉和頁腳會粘在他們的位置的佈局，並且內容將有一個最小高度，並顯示一個滾動條，如果視口高度太小。

我成功地在這個codepen上執行它： http://codepen.io/DlafCreative/pen/wzdOEN 從另一個發射。

的問題是，HTML標記不方便與我使用框架（Angular2）作爲<header>是在同一水平<main>，並且<footer>是外<prop-wrapper>。

在我的應用程序中，頁眉應該在所有頁面中保持不變，而頁腳應該是動態的。所以，想什麼，我是有<header><prop-wrapper>面前，<footer><main>後，像這樣的叉式codepen：http://codepen.io/DlafCreative/pen/xEAXxy 這樣一來，我可以更容易地定義

內容現在，我很難得到與相同的行爲標記。歡迎來幫忙！ Thx很多:)

Answer 1

這可能會幫助你。因此，它的工作原理是如下：

所有的

1. 首先，使用刪除瀏覽器的默認保證金：

   body { 
       margin: 0; 
   } 
   

2. 使用display: flex讓你prop-body一個flexbox。你會給flex-direction: column使其垂直彎曲。爲了填補整個屏幕的高度給予height: 100vh：

   prop-body { 
       display: flex; 
       flex-direction: column; 
       height: 100vh; 
   } 
   

3. 添加flex: 1到prop-wrapper，使其充滿header和footer之間的空間。

   這是一個簡寫，意思是：

   a。 flex-grow是1 b。 flex-shrink是1

   這意味着此Flex項目的高度將通過增長或縮小來填充剩餘空間。

請參閱flex: 1含義here。

撓曲：相當於彎曲：1 0 使柔性物品的柔性，並將柔性基礎零， 導致接收 自由空間中的柔性容器中的指定比例的項。如果柔性容器 中的所有項目均使用此模式，則其尺寸將與指定的彈性係數成比例。

1. 現在您可以輕鬆看到佈局 - 我們正在使用一些嵌套的柔性盒。

body { 
 
    margin: 0; 
 
} 
 
prop-body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
} 
 
prop-body header { 
 
    background: grey; 
 
    padding: 20px; 
 
} 
 
prop-body prop-wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    background: lightblue; 
 
    flex: 1; 
 
} 
 
prop-body prop-wrapper main { 
 
    overflow-y: auto; 
 
    flex: 1; 
 
} 
 
prop-body prop-wrapper main p { 
 
    padding: 50px; 
 
} 
 
footer { 
 
    display: flex; 
 
    background: pink; 
 
    min-height: 50px; 
 
    height: 10vh; 
 
} 
 
footer .footer-content { 
 
    flex: 1; 
 
    background: plum; 
 
}

<prop-body> 
 
    <header>Header</header> 
 
    <prop-wrapper> 
 
    <main> 
 
     <p>CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
 
     CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</p> 
 
    </main> 
 
    <footer> 
 
     <div class="footer-content"> 
 
     Footer 
 
     </div> 
 
    </footer> 
 
    </prop-wrapper> 
 
</prop-body>