Несовместимость в firefox

Я собираюсь завершить свой первый веб-проект, и когда я проверяю браузеры, я обнаруживаю, что firefox вызывает у меня следующую ошибку в нижнем колонтитуле.

просмотреть Chrome:

просмотреть Firefox:

Несовместимость в firefox

Как вы можете видеть в других браузерах, он работает и отлично выглядит в firefox, это единственный, который создает для меня это пространство, если вы можете мне помочь, я был бы признателен. Вот код:

footer 
{
    position: absolute;
    top: 2050px;
    height: 330px;
}

footer div#aboutme
{
    width: 50%;
    height: 300px;
    margin: 0px;
    padding-bottom: 0px;
}

footer div#aboutme h3
{
    width: 80%;
    margin-left: 10%;
    padding-top: 20px;
}

footer div#aboutme p
{
    width: 80%;
    margin-left: 10%;
    padding-top: 15px;
}

footer div.rrss
{
    position: relative;
    width: 50%;
    height: 150px;
    margin: 0px;
    top: -300px;
    left: 50%;
    padding-bottom: 0px;
}

footer div.rrss p
{
    padding-top: 30px;
}

footer div.rrss a
{
    padding-top: 15px;
}

footer div.suscription
{
    position: relative;
    width: 50%;
    height: 150px;
    margin: 0px;
    top: -300px;
    margin-left: 50%;
    padding-bottom: 0px;
    text-align: center;
}

footer div.suscription p
{
    display: block;
    padding-top: 0px;
    padding-bottom: 30px;
}

footer div.suscription input:nth-of-type(1)
{
    max-width: 175px;
}

footer div.suscription input:nth-of-type(2)
{
    max-width: 125px;
    border: none;
    border-bottom: 1px solid white;
}

footer div#derechos
{
    position: relative;
    top: -299px;
}

footer div#derechos p
{
    position: relative;
    top: 15px;
}

<footer>
    <div id = "aboutme">
        <h3>Acerca de mí...</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>


    <div class = "rrss">
        <p><strong>Encuentrame en:</strong></p>
        <a href = "#"></a>
        <a href = "" target = "_blank"></a>
        <a href = "" target = "_blank"></a>
        <a href = "#"></a>
    </div>

    <div class = "suscription">
        <p>Recibe nuestras publicaciones en tu email.</p>
        <input type = "mail" name = "email" placeholder = "Ingresa tu email" id = "input_registro">
        <input type = "button" id = "button_registro" name = "button_registro" value = "Registrar">
    </div>

    <div id = "derechos">
        <p>© 2018 All rights reserved | Privacity Policy</p>
    </div>

</footer>

Фиксированный top для нижнего колонтитула мне кажется плохим, почему бы вам не сказать bottom: 0 или bottom: <footer height>, это сделало бы его намного более динамичным

— 01.09.2018 21:42

html css

01.09.2018 21:37

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 1

вот откуда взялась ваша беда:

footer div.rrss
{
    position: relative;
    width: 50%;
    height: 150px;
    margin: 0px;
    top: -300px;
    left: 50%;
    padding-bottom: 0px;
}

Firefox перемещает его вверх по экрану, но не освобождает это место.

добавьте overflow:hidden в нижний колонтитул, чтобы сохранить его высоту 300 пикселей

footer 
{
    position: absolute;
    top: 2050px;
    height: 330px;
    overflow:hidden; /* will not keep space used by the relative element */
}

footer div#aboutme
{
    width: 50%;
    height: 300px;
    margin: 0px;
    padding-bottom: 0px;
}

footer div#aboutme h3
{
    width: 80%;
    margin-left: 10%;
    padding-top: 20px;
}

footer div#aboutme p
{
    width: 80%;
    margin-left: 10%;
    padding-top: 15px;
}

footer div.rrss
{
    position: relative;
    width: 50%;
    height: 150px;
    margin: 0px;
    top: -300px;
    left: 50%;
    padding-bottom: 0px;
}

footer div.rrss p
{
    padding-top: 30px;
}

footer div.rrss a
{
    padding-top: 15px;
}

footer div.suscription
{
    position: relative;
    width: 50%;
    height: 150px;
    margin: 0px;
    top: -300px;
    margin-left: 50%;
    padding-bottom: 0px;
    text-align: center;
}

footer div.suscription p
{
    display: block;
    padding-top: 0px;
    padding-bottom: 30px;
}

footer div.suscription input:nth-of-type(1)
{
    max-width: 175px;
}

footer div.suscription input:nth-of-type(2)
{
    max-width: 125px;
    border: none;
    border-bottom: 1px solid white;
}

footer div#derechos
{
    position: relative;
    top: -299px;
}

footer div#derechos p
{
    position: relative;
    top: 15px;
}

<footer>
    <div id = "aboutme">
        <h3>Acerca de mí...</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>


    <div class = "rrss">
        <p><strong>Encuentrame en:</strong></p>
        <a href = "#"></a>
        <a href = "" target = "_blank"></a>
        <a href = "" target = "_blank"></a>
        <a href = "#"></a>
    </div>

    <div class = "suscription">
        <p>Recibe nuestras publicaciones en tu email.</p>
        <input type = "mail" name = "email" placeholder = "Ingresa tu email" id = "input_registro">
        <input type = "button" id = "button_registro" name = "button_registro" value = "Registrar">
    </div>

    <div id = "derechos">
        <p>© 2018 All rights reserved | Privacity Policy</p>
    </div>

</footer>

Вы также можете рассмотреть сетку для макета нижнего колонтитула:

footer {
  position: absolute;
  top: 2050px;
  height: 350px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #444;
  color: white;
}

footer div#aboutme {
  grid-column: 1;
  grid-row: 1 / span 2;
}

footer div#aboutme h3 {
  width: 80%;
  margin-left: 10%;
  padding-top: 20px;
}

footer div#aboutme p {
  width: 80%;
  margin-left: 10%;
  padding-top: 15px;
}

footer div.rrss {
  grid-column: 2;
  grid-row: 1;
}

footer div.rrss p {
  padding-top: 30px;
}

footer div.rrss a {
  padding-top: 15px;
}

footer div.suscription {
  grid-column: 2;
  grid-row: 2;
}

footer div.suscription p {
  display: block;
  padding-top: 0px;
  padding-bottom: 30px;
}

footer div.suscription input:nth-of-type(1) {
  max-width: 175px;
}

footer div.suscription input:nth-of-type(2) {
  max-width: 125px;
  border: none;
  border-bottom: 1px solid white;
}

footer div#derechos {
  grid-row: 3;
  grid-column: 1 / span 2;
  margin: auto;
}

footer div#derechos p {}

<footer>
  <div id = "aboutme">
    <h3>Acerca de mí...</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>


  <div class = "rrss">
    <p><strong>Encuentrame en:</strong></p>
    <a href = "#"></a>
    <a href = "" target = "_blank"></a>
    <a href = "" target = "_blank"></a>
    <a href = "#"></a>
  </div>

  <div class = "suscription">
    <p>Recibe nuestras publicaciones en tu email.</p>
    <input type = "mail" name = "email" placeholder = "Ingresa tu email" id = "input_registro">
    <input type = "button" id = "button_registro" name = "button_registro" value = "Registrar">
  </div>

  <div id = "derechos">
    <p>© 2018 All rights reserved | Privacity Policy</p>
  </div>

</footer>

01.09.2018 22:04

Другие вопросы по теме

Форматирование div внутри контейнера div

Функция Javascript не работает при первом вызове

Выравнивание среднего текста HTML

Как заставить это сообщение Toast работать на моем сайте Wordpresss при событии щелчка

Как сделать заставку для игры

Измените фон моей веб-страницы с помощью локального хранилища

Источник изображения не найден на моей странице JSP. Страница 404 не найдена в консоли браузера

Как изменить один конкретный класс CSS

Как я могу центрировать детей по горизонтали внутри col-xs-12 div?

Плавная прокрутка с таймером в HTML

Несовместимость в firefox

Ответы 1

Другие вопросы по теме

Похожие вопросы