Первый вопрос здесь. Я искал это, но не нашел ничего полезного (извините за плохой английский, я из Бразилии).

Моя цель состоит в том, чтобы иметь два нижних колонтитула, один поверх другого, в первом есть ссылки на социальные сети в виде крошечных значков, а у другого - экранные кнопки, но этот должен следовать за прокруткой, поэтому он применяет липкий класс. Таким образом, это приложение Angular, предназначенное для использования на смартфонах. Мы используем SCSS для стилизации страниц, и я создал два компонента, по одному для каждого нижнего колонтитула (социальный нижний колонтитул и экраны-нижний колонтитул, потому что на некоторых экранах будет два, а на других только последнее). Компонент социального нижнего колонтитула правильно работает в Opera Mini (мобильный), Google Chrome, Microsoft Edge, Midori и Opera (ПК), но не в Mozilla Firefox (нижний колонтитул экрана скрывает часть нижнего колонтитула в конце страницы): Нижние колонтитулы в нескольких браузерах

CSS, который я применил к screen-footer, чтобы приклеить его к нижней части:

.position-sticky {
    position: -webkit-sticky;
    position: sticky;
}

.bottom-0px {
    bottom: 0px;
}
1
victorbarceloslacerda 8 Дек 2020 в 16:14

1 ответ

Лучший ответ

Обнаружил корень проблемы при воспроизведении ошибки во фрагменте. Это был "контейнерный" класс, примененный к родительскому тегу (div) компонентов нижнего колонтитула, который определял "height: 100vh;". Почему-то результат в Firefox отличается от результатов в других браузерах. Вот воспроизведение ошибки:

function toggleContainer() {
  if(document.getElementById("container-tag").classList.contains('container'))
    document.getElementById("container-tag").classList.remove('container');
  else
    document.getElementById("container-tag").classList.add('container');
}
html,
body {
  width: 100%;
  margin: 0px;
  padding: 0px;
}

* {
  box-sizing: border-box;
}

.width-100 {
  width: 100%;
}

.padding-10px {
  padding: 10px;
}

.header {
  background-color: lime;
}

.content {
  background-color: cyan;
}

.display-flex {
  display: flex;
}

.flex-direction-column {
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.sticky-footer {
  background-color: yellow;
}

.static-footer {
  background-color: red;
  color: white;
}

.position-sticky {
  position: -webkit-sticky;
  position: sticky;
}

.bottom-0px {
  bottom: 0px;
}

.container {
  height: 100vh;
}
<html>

<head>
  <title>Footers Problem</title>
</head>

<body>
  <div id="container-tag" class="container display-flex flex-direction-column">
    <div class="header padding-10px">
      <h1>Footers Problem</h1>
    </div>
    <div class="content padding-10px flex-1">
      <u><h2>Compare another browser's result with firefox's</h2></u>
      <h3>Some content</h3>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
      <h3>Some other content</h3>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
      <h3>Even More content</h3>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content
        Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
      <h3>Some content</h3>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
      <h3>Some other content</h3>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
      <h3>Even More content</h3>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content
        Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
      <h3>Some content</h3>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
      <h3>Some other content</h3>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
      <h3>Even More content</h3>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content
        Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
      <h2>THE END</h2>
    </div>
    <div class="static-footer padding-10px">
      <h4>Static Footer</h4>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content tent Content Content Content Content Content Conte.ent Content Content Content ent Content Content Content ent Content Content
        Content ent Content Content Content ent Content Content Content ent Content Content Content </p>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content tent Content Content Content Content Content Conte.ent Content Content Content ent Content Content Content ent Content Content
        Content ent Content Content Content ent Content Content Content ent Content Content Content </p>
    </div>
    <div class="sticky-footer padding-10px position-sticky bottom-0px">
      <h4>Sticky Footer</h4>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
      <button onclick="toggleContainer()">Toggle Container</button>
    </div>
  </div>
</body>

</html>
0
victorbarceloslacerda 9 Дек 2020 в 12:21