Flexbox липкий нижний колонтитул и контейнер с динамической высотой

Question

У меня есть страница, где есть левая и правая колонны с нижним колонтитулом внизу. В правой колонке будет переполнен контент. Мне нужен этот контейнер, чтобы иметь полосу прокрутки, а не весь корпус, чтобы нижний колонтитул оставался внизу, и пользователь будет прокручивать содержимое правой колонки.

Мне также нужна динамическая высота, поэтому, когда пользователь изменяет размер окна, нижний колонтитул останется внизу, а размер правой колонки изменится. Я знаю, что для этого мне понадобится $ (window) .resize(), но я не уверен, что именно вставить в эту функцию.

Может кто-нибудь помочь мне, пожалуйста?

Вот мой codepen http://codepen.io/amwill/pen/lmAzb

#top { 
    display: flex; 

    .left-column { 
    background: lightgreen; 
    flex: 1; 
    padding: 20px; 
    } 

    .right-column { 
    display: flex; 
    flex: 3; 
    flex-direction: column;  

    header { 
     background: coral; 
     padding: 20px; 
    } 

    > div { 
     background: lightblue; 
     overflow-y: scroll; 

     p { 
     padding: 20px;  
     } 
    }  

    } 

} 

.footer { 
flex: 1; 
    display: flex; 

    .footer-left { 
    flex: 1; 
    background: pink; 
    padding: 20px; 
} 

.footer-right { 
    flex: 3; 
    background: plum; 
} 

} 

Answer 1

можно назначить значение размера на основе просмотра, таким образом, вы можете иметь немного больше контроля. В вашем конкретном случае, я попытался это:

body{width:100vw; height:100vh; overflow:hidden} 
#top { 
    display: flex; 

    .left-column { 
    background: lightgreen; 
    flex: 1; 
    padding: 20px; 
    height:85vh; 
    overflow:hidden; 
    } 

    .right-column { 
    display: flex; 
    flex: 3; 
    flex-direction: column; 
    height:90vh; 


    header { 
     background: coral; 
     padding: 20px; 
    } 

    > div { 
     background: lightblue; 
     overflow-y: scroll; 

     p { 
     padding: 20px;  
     } 
    }  

    } 

} 

.footer { 
    flex: 1; 
    display: flex; 
height:10vh; 

    .footer-left { 
    flex: 1; 
    background: pink; 
    padding: 20px; 
    } 

    .footer-right { 
    flex: 3; 
    background: plum; 
    } 

} 

и, кажется, работает, но я не уверен, если это то, что вы ищете. I forked your codepen, так что вы можете видеть это, но так как CodePen использует iframe и размеры видовых экранов, не работают нормально с iframes, вам нужно будет протестировать на реальной странице самостоятельно

Answer 2

Установите внешний контейнер (тело), ​​чтобы быть Flexbox родителем и установить направление потока вниз по вертикали, так что вы можете исправить колонтитул внизу.

Вот быстрый и грязный раствор: http://codepen.io/anon/pen/uzexD

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

body { 
    display: flex; 
    flex-direction: column; 
}