Проблемы с гибкой сеткой Zurb Foundation

Я использую zurb Foundation v.6 и его гибкую сетку вместо обычной сетки, в которой используются числа с плавающей запятой. Я сделал нижний колонтитул, где у меня есть 2 div, каждый из которых я хочу выровнять по своему концу. Это код:

<footer id="footer">
  <div class="row align-justify align-middle">
    <div class="column small-6">
      Adresse, org. nr, lenke til kontakt
    </div>
    <div class="column small-6">
      <img src="/img/facebook.svg">
      <img src="/img/twitter.svg">
    </div>
  </div>
</footer>

Это css для него:

#footer {
  height: 4rem;
  position: relative;
  z-index: 1;
  background-color: $gray;

  .social-links {
    display: flex;
    justify-content: flex-end;
  }
}

У меня проблема в том, что нижний колонтитул не берет высоту 4rem, он просто берет высоту изображений. Как я могу это исправить?


html css flexbox zurb-foundation-6
person Leff    schedule 14.06.2017    source источник
comment
Что, если вы укажете, что изображения должны быть на 100% выше, как в #footer img { height: 100%; }   -  person Ason    schedule 14.06.2017

Ответы (1)


arrow_upward
1
arrow_downward

Добавить CSS

.align-middle {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  align-items:center;
  height:100%;
}


#footer {
  height: 4rem;
  position: relative;
  z-index: 1;
  background-color: #ddd;
}

.social-links {
  display: flex;
  justify-content: flex-end;
}

.align-middle {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  align-items:center;
  height:100%;
}
<footer id="footer">
  <div class="row align-justify align-middle">
    <div class="column small-6">
      Adresse, org. nr, lenke til kontakt
    </div>
    <div class="column small-6">
      <img src="/img/facebook.svg">
      <img src="/img/twitter.svg">
    </div>
  </div>
</footer>

person LKG    schedule 14.06.2017