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

Question

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

0

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

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

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

Вот мой код 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;
 }

}

cocoa 11 сен. 2014, в 01:14

Источник

Теги:

javascript

jquery

html

css

css3

2 ответа

0

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

Здесь быстрое и грязное решение: http://codepen.io/anon/pen/uzexD

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

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

sahbeewah 10 сен. 2014, в 21:21

0

Это тоже хорошо выглядит, но я бы не стал нацеливаться на тело
cocoa 11 сен. 2014, в 15:38

Ещё вопросы

Это тоже хорошо выглядит, но я бы не стал нацеливаться на тело

Devin · Accepted Answer · 2014-09-10T21-51-00.000Z

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

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;
  }

}

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

Это то, что мне было нужно! Спасибо!