Поместите нижний колонтитул с содержимым, расположенным как абсолютный

ProgramBox

Поместите нижний колонтитул с содержимым, расположенным как абсолютный

Post author:admin
Запись опубликована:31 августа, 2022
Post category:Вопросы по программированию

#html #css #footer

#HTML #css #нижний колонтитул

Вопрос:

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

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

 <style>

* {
    margin: 0;
    }
    html, body {
    height: 100%;
    }
    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
    }
    .footer, .push {

    height: 4em;
    }
 </style>
 </head>

<body>
<div class="wrapper">
<img src="activity/Chrysanthemum.jpg" style="z-index: 1; position:absolute; width: 420px; height: 400px; left: 100px;top:260px; ">
<div class="push">
</div>
</div>
<div class="footer" >copyrights</div>
</body>

Если я изменю стиль изображения, удалив position:absolute свойство, все выглядит нормально. итак, мой вопрос в том, как мы можем разместить нижний колонтитул внизу с абсолютным позиционированным содержимым?

1. Google «css sticky footer», и вы найдете несколько хороших способов сделать это

2. Казалось, он сделал это Моин. Я вижу, что проблема в том, что единственным содержимым является абсолютный img на оболочке, я думаю, что это проблема.

3. да, я пробовал этот www.cssstickyfooter.com метод, но он тоже не работает! возможно ли вообще вставить нижний колонтитул внизу с абсолютным содержимым?

Ответ №1:

Обновленный ответ, касающийся комментария.
Как я упоминал в своем предыдущем ответе, этот эффект не может быть достигнут с помощью чистого CSS. Итак, я покажу подход JavaScript. Добавьте соответствующие идентификаторы (см. Fiddle ) и добавьте следующий код в конце вашего тела. Этот фрагмент кода изменит размер вашей оболочки, когда это необходимо.
Примечание: Когда страница меньше высоты окна, оболочка страницы все равно займет всю высоту, потому что невозможно отличить изменение высоты по абсолютно расположенному элементу.

 <script>
(function(){
    var wrapper = document.getElementById("wrapper");
    var height = document.documentElement.scrollHeight;
    wrapper.style.height = height   "px";
})();
</script>

Предыдущий ответ:
Проблема вызвана тем фактом, что элементы с абсолютным расположением не влияют на высоту / ширину их родительского элемента.

Чтобы исправить ваш код, примените следующий CSS (отображающий только соответствующий CSS, обновленный с добавлением описательных комментариев). Скрипка: http://jsfiddle.net/4ja2V /

 html, body {
    height: 100%;
    width: 100%;
    padding: 0; /* Get rid off the padding */
}
.wrapper {
    position: relative; /* Necessary to properly deal with absolutely positioned
                           child elements. */
    height: 100%;
    margin: 0 auto 4em; /* So that the content is visible when scrolled down*/
}
.footer {
    height: 4em;
    position: fixed; /* Positions your footer at a fixed position in the window*/
    bottom: 0; /* At the bottom of the window*/
}

Вы использовали отрицательное нижнее поле для .wrapper , что привело к тому, что элемент «съел» нижний колонтитул. Когда вы используете абсолютно отравленные внутренние элементы, нет надежного метода чистого CSS для получения реальной ширины / высоты .wrapper элемента. Отсюда и появление position:fixed .

Нижний колонтитул определяется как имеющий высоту 4em . Поскольку нижний колонтитул расположен в фиксированном положении (т. Е. Элемент не будет перемещаться при прокрутке вниз), необходимо применить дополнительное поле внизу элемента-оболочки.

1. большое спасибо за ответ… прошу прощения, если вопрос был немного вводящим в заблуждение. я видел скрипку, и то, что я пытаюсь сделать, это поместить copyright текст под красным полем в демонстрационной версии ur. короче говоря, если есть вертикальная полоса прокрутки, нижний колонтитул должен быть внизу, а в случае отсутствия полосы прокрутки нижний колонтитул должен быть внизу окна просмотра.

Ответ №2:

дайте вашему нижнему колонтитулу фиксированную высоту, а затем в вашем абсолютном классе выполните

 bottom: heightOfYourFooter   5px;