Поместите нижний колонтитул с Контентом, расположенным как абсолют - PullRequest
Новая
       0

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

1 голос
/ 23 октября 2011

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

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

<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, все выглядит нормально.поэтому мой вопрос заключается в том, как мы можем разместить нижний колонтитул с абсолютным позиционированием содержимого?

Ответы [ 2 ]

1 голос
/ 23 октября 2011

Обновлен ответ относительно комментария.
Как я уже упоминал в моем предыдущем ответе, этот эффект не может быть достигнут с помощью чистого 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. Поскольку нижний колонтитул расположен в фиксированной позиции (т. Е. Элемент не перемещается при прокрутке вниз), необходимо применить дополнительное поле внизу элемента-обертки.

0 голосов
/ 23 октября 2011

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

. 
bottom: heightOfYourFooter + 5px;
...