Как я могу добавить пробел внутри фиксированного элемента?

Question

У меня проблема с двумя фиксированными элементами внизу моей страницы:

#wrapper {
  position: fixed;
  background: gray;
  color: #fff;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 12px 12px 0 0;
  width: 100%;
}

#bottom-element {
  height: 30px;
  position: fixed;
  background: black;
  display: block;
  bottom: 0;
  z-index: 2;
  width: 100%;
  left: 0;
  right: 0;
}

#title {
  text-align: center;
  padding: 15px;
  border-bottom: 1px solid white;
}

#notifications {
  display: flex;
  flex-direction: column;
      overflow: scroll;
    overflow-x: hidden;
}

.entry {
  padding: 15px;
  background: cadetblue;
}

<div id="wrapper">
  <div id="title">Notifications</div>
  <div id="notifications">
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
  </div>
</div>
<div id="bottom-element"></div>

Проблема в том, что последняя запись скрыта под bottom-element. Я уже пробовал это на элементе уведомлений:

• padding-bottom: 30px
• margin-bottom: 30px

А также псевдоэлемент:

#notifications::after {
    content: '';
    width: 100%;
    height: 30px;
    display: block;
}

Но ничего не работает. Как я могу решить эту проблему?

Answer 1

Есть несколько способов достичь того, что вы хотите, я буду go с самым быстрым.

Причина, по которой вы не получили то, что ожидали: Ваш низ bar находится снаружи и не ограничена вашей оболочкой, а оболочка не ограничена 100% высотой (область просмотра используемого вами экрана), поэтому раздел уведомлений просто занимает больше места ниже. Так как ваша нижняя панель закреплена снизу, она будет перекрываться. На маленьком экране вы увидите менее шести уведомлений.

Как исправить: - Переместите нижнюю планку внутри вашей обертки - Сделайте вашу обертку изогнутой в направлении колонки - Придайте ей 100% высоты

Теперь ваши уведомления можно прокручивать и просматривать, и это будет работать, даже если у вас есть 10 или 100 уведомлений.

Почему это работает: Ваша оболочка теперь 100 % и не может go под экраном. Он гибкий, поэтому элементы внутри оболочки - «title», «notifications» и «bottom-element» будут корректно подгоняться и подгоняться. Кроме того, у ваших уведомлений есть свиток переполнения, поэтому любые дополнительные уведомления будут скрыты, но видны при прокрутке вниз.

Обновленный фрагмент с исправлением:

#wrapper {
  position: fixed;
  display: flex;
  flex-direction: column;
  background: gray;
  color: #fff;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 12px 12px 0 0;
  width: 100%;
  height: 100%;
}

#bottom-element {
  height: 30px;
  position: fixed;
  background: black;
  display: block;
  bottom: 0;
  z-index: 2;
  width: 100%;
  left: 0;
  right: 0;
}

#title {
  text-align: center;
  padding: 15px;
  border-bottom: 1px solid white;
}

#notifications {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  overflow-x: hidden;
}

.entry {
  padding: 15px;
  background: cadetblue;
}

<div id="wrapper">
  <div id="title">Notifications</div>
  <div id="notifications">
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
  </div>
  <div id="bottom-element"></div>
</div>

Answer 2

Во-первых, вы должны вставить неразрывный пробел. Во-вторых, вы вставляете пустое пространство разной ширины. После этого вы mimi c вкладка с неразрывными пробелами. Теперь вы можете делать отступы в абзацах с помощью CSS.