Блог

Главная - Вопросы по программированию - Как реализовать следующую разметку с липким верхним и нижним колонтитулами с помощью flexbox?

Как реализовать следующую разметку с липким верхним и нижним колонтитулами с помощью flexbox?

#html #css #flexbox #markup

#HTML #css #flexbox #разметка

Вопрос:

В данный момент я изучаю CSS flexbox и хочу реализовать эту разметку:

введите описание изображения здесь

  1. Я хочу header , чтобы и footer было «липким» ( header всегда сверху и footer всегда внизу).
  2. Если article или aside1 или aside2 размер не соответствует странице, я хочу, чтобы область между верхним и нижним колонтитулами можно было прокручивать.

Итак, мой план был:

  1. Создайте элемент контейнера с display: flex его элементами и column direction для него
  2. Он будет содержать 3 элемента: header , footer и { aside1 , article и aside2 }, которые будут упакованы в другой контейнер.
  3. Этот другой контейнер будет иметь display: flex сам с row direction для своих элементов: aside , article и aside2

Моя разметка очень проста:

 <div class="wrapper">
  <header>This is header</header>
  
  <div class="content">
    <aside>aside1</aside>
    <article>article</article>
    <aside>aside2</aside>
  </div>

  <footer>This is footer</footer>
</div>

И вот стили:

 html, body {
  height: 100%;
}

/* Main wrapper, sizes = 100% to fit the viewport */
.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  border: solid 1px black;
  flex-direction: column;
}

/* Just some styling, ignore this */
header,
article,
aside,
footer {
  border: solid 1px #888;
  padding: 1rem;
  text-align: center;
}

header {
  background-color: #cfffff;
}

/* flex: 1 makes it "stretch" allowing header and footer
to have their default sizes  */
.content {
  display: flex;
  flex: 1;
  overflow-y: scroll;
}

aside {
  box-sizing: border-box;
  vertical-align: top;
  background-color: #cfffcf;
  width: 250px;
}

article {
  background-color: #ffcfff;
  flex: 1;
}

footer {
  background-color: #ffffcf;
}

Проблема в том, что всякий article раз, когда содержимое переполняет контейнер, прокрутка происходит не так, как я ожидаю:

введите описание изображения здесь

Я хочу понять:

  1. Почему это происходит?
  2. Каков правильный способ сделать это?

Ответ №1:

Используйте новый стиль

 position: sticky;
 
 html, body {
  height: 100vh;
}

/* Main wrapper, sizes = 100% to fit the viewport */
.wrapper {
  width: 100%;
  display: flex;
  border: solid 1px black;
  flex-direction: column;
}

/* Just some styling, ignore this */
header,
article,
aside,
footer {
  border: solid 1px #888;
  padding: 1rem;
  text-align: center;
}

header {
  background-color: #cfffff;
  position: sticky;
  top:0;
}

/* flex: 1 makes it "stretch" allowing header and footer
to have their default sizes  */
.content {
  display: flex;
  flex: 1;
}

aside {
  box-sizing: border-box;
  vertical-align: top;
  background-color: #cfffcf;
  width: 250px;
}

article {
  background-color: #ffcfff;
  flex: 1;
}

footer {
position: sticky;
bottom:0;
  background-color: #ffffcf;
} 
 <div class="wrapper">
  <header>This is header</header>
  
  <div class="content">
    <aside>aside1</aside>
    <article>article</article>
    <aside>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</aside>
  </div>

  <footer>This is footer</footer>
</div>

Метки: