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

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

нижнего колонтитул, который всегда должен быть в нижней части окна просмотра (нет магазинного)
CSS только
высоты на основе содержания колонтитула (переменный)
какой-то образом предотвратить перекрытие основного содержимого элемента - когда не прокручивается вниз
нет таблиц

Заголовок

содержание

сноска

если вы удалите какой-либо из требований, я знаю, как это сделать, но не с все требование нет в наличии. Кто-нибудь знает решение?

источник

2015-04-23 Egi

* gimme the codez * – Downgoat

codez - это то, что я ищу XD – Egi

Как насчет использования какой-либо рамки CSS? – SaidbakR

Чтобы поместить футер внизу вы можете использовать вариацию следующее:

.some-footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100% 
}

Проблема с этим состоит в том, что основное содержание будет за колонтитула и вы не сможете ее прокручивать. И вы не можете просто поместить padding-bottom в контент, потому что вы не знаете высоту нижнего колонтитула.

Я бы порекомендовал разместить дубликат нижнего колонтитула после содержания, но этот с position: relative и с opacity: 0. Таким образом, вы всегда можете прокручивать, пока все содержимое не будет видно, независимо от высоты нижнего колонтитула.

источник

2015-04-23 23:32:37 Gabriel

, который действительно работает так, как я этого хочу. Мне это не нравится, потому что это хак, но невидимый нижний колонтитул действительно делает это. Я подожду немного и посмотрю, знает ли кто-нибудь чистое решение, прежде чем я приму свой ответ :) Большое спасибо. – Egi

-1

Это должно работать так, как вы хотите! :) Он всегда будет внизу страницы. Это будет всегда в нижней части окна просмотра, НИКАКИЕ ВОПРОСЫ ЧТО! : D

#footer{ 
 
    height: auto; 
 
    min-height: 100px; 
 
    width: 100%; 
 
    background-color: blue; 
 
    bottom: 0px; 
 
    position: fixed; 
 
    display: block; 
 
    z-index: 100000; 
 
}

<div id="footer"> 
 
</div>

источник

2015-04-23 23:18:30

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

Позиция фиксированная позволит ей придерживаться нижней части страницы. Вышеприведенный код работает отлично. –

Опять же, он это знает. он хочет, чтобы он «каким-то образом предотвращал перекрытие основного элемента контента», поэтому, если область просмотра имеет высоту 600 пикселей, а нижний колонтитул - 200 пикселей, а контент - 800 пикселей, он хочет, чтобы содержимое было прокручено до 400 пикселей и переполнения до того, как оно будет под нижним колонтитулом , Нижний колонтитул - это переменная высота, поэтому он не знает, что всегда будет заданное число, что означает, что он хочет вычисленную высоту, где элементы используют другие элементы для определения размера. –

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

ответ

Смежные вопросы