Можно ли использовать flexbox для закрепления последнего раздела нижнего колонтитула путем расширения предыдущего раздела нижнего колонтитула? - PullRequest
Новая
       38

Можно ли использовать flexbox для закрепления последнего раздела нижнего колонтитула путем расширения предыдущего раздела нижнего колонтитула?

0 голосов
/ 04 ноября 2018

Учитывая базовую структуру HTML (которую я не могу изменить) ниже, я знаю, что могу расширить div основного содержимого с помощью этого CSS: 

html,
body {
  height: 100%;
}

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

#columns {
  flex: 1 0 auto;
}

.footer {
  flex-shrink: 0;
}
<body>
  <header>
    HEADER CONTENT
  </header>
  <div id="columns" class="container">
    MAIN CONTENT
  </div>
  <footer class="footer">
    <div class="container"> </div>
    <div id="footer-content">
      FOOTER CONTENT
   </div>
  </footer>
</body>

Но в разделе 'столбцы' есть стиль, который я не хочу расширять ниже содержимого, поэтому я бы предпочел, если возможно, расширить предпоследний пустой div (.container) внутри нижнего колонтитула. раздел.

Я перепробовал все, что мог придумать, но я новичок в css и ничего не помогло.

Можно ли это сделать?

1 Ответ

0 голосов
/ 06 ноября 2018

Я понял, используя codepen в режиме SCSS, чтобы я мог вкладывать селекторы. Это сделало эксперименты намного проще.

Оказалось, что мне нужны две flexbox: одна для расширения всей секции нижнего колонтитула, чтобы заполнить доступное пространство, и одна в пределах нижнего колонтитула, чтобы аналогичным образом расширить контейнер заполнения.

Вот код с background-color, добавленным в каждый раздел контента для иллюстрации: 

html,
body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  margin: 0;
}
body header {
  background-color: green;
}
body #columns {
  background-color: blue;
}
body #footer-content {
  background-color: red;
}
body .footer {
  flex: 1;
  display: flex;
  flex-direction: column;
}
body .footer .container {
  flex: 1;
}
<body>
  <header>
    HEADER CONTENT
  </header>
  <div id="columns" class="container">
    MAIN CONTENT
  </div>
  <footer class="footer">
    <div class="container"> </div>
    <div id="footer-content">
      FOOTER CONTENT
   </div>
  </footer>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...