#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;
Комментарии:
1. он не работает… luks, подобные
bottom
свойству, не имеют никакого эффекта при использовании соtop
left
свойствами и