Нижний колонтитул позиции внизу

В настоящее время у меня есть нижний колонтитул на моем веб-сайте, который я хочу иметь в нижней части страницы в любое время. Это всего лишь одна строка на большинстве экранов, поэтому я подумал, что было бы неплохо иметь ее всегда там. Я тоже хочу держаться подальше от JavaScript.Нижний колонтитул позиции внизу

CSS

#footer { 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
}

HTML

<div class="footer"> 
    <p class="footer">Design by <a class="footer" href="http://www.tropilac.com">Tropilac</a></p> 
</div>

источник

2015-07-04 Tropilac

В настоящее время он работает, но так как я использую маржинального CSS тег толкает его в левой части экрана слишком далеко. div.footer { \t background: #FFFFFF; \t margin-top: 5px; \t margin-left: 100px; \t margin-right: 100px; \t border-radius: 20px; \t padding-left: 25px; \t позиция: абсолютная; \t bottom: 0px; \t ширина: 100%; } – Tropilac

Угадайте, Измените ширину страницы на 80%, чтобы исправить проблему! ширина: 80%; HTML остается тем же Нового CSS \t div.footer { \t \t фон: #FFFFFF; \t \t margin-top: 5px; \t \t margin-left: 100px; \t \t margin-right: 100px; \t \t border-radius: 20px; \t \t padding-left: 25px; \t \t позиция: абсолютная; \t \t bottom: 0px; \t \t ширина: 80%; \t} – Tropilac

Пожалуйста, вместо того, чтобы комментировать свой вопрос, отредактируйте его.Вы нашли решение еще? –

Используйте position: fixed, если вам нужно показать в любое время.

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    text-align: center; 
 
    background: lightgray; 
 
    color: black; 
 
}

<html> 
 

 
<body> 
 
    <div class="footer"> 
 
    <p class="footer">Design by <a href="http://www.tropilac.com">Tropilac</a> 
 
    </p> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2015-07-04 13:08:04

А также добавьте разделитель div с высотой нижнего колонтитула, чтобы увидеть весь возможный скрытый контент. – fassl

@fassl его не очень хорошая практика, чтобы добавить ненужные html как разделители div. – Kilmazing

@kilmazing необходимо преодолеть проблему, что содержание, вероятно, будет скрыто нижним колонтитулом, если вы сделаете это с разделителем div или маркой на последнем ребенке тела или независимо от тысяч возможностей, которые могут быть подвержены одному себе. Я предпочитаю нижний разделитель div внизу страницы, чем манипулировать полями блоков, которые фактически не имеют никакого отношения к самому нижнему колонтитулу. Какова хорошая практика преодоления этой проблемы? – fassl

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

.footer { 
    position: fixed; 
    height: 50px; 
    border: 1px solid #ccc; 
    position: fixed; 
    bottom: 0; 
    left: 10%; 
    right: 10%; 
}

Это даст вам колонтитул, который остается в нижней части окна просмотра. Один из недостатков заключается в том, что если контент длиннее страницы, нижний колонтитул будет отображаться в нижней части страницы. Этот код также даст вам 80% ширины.

Fiddle: http://jsfiddle.net/p16rwgnn/

источник

2015-07-04 13:14:16 Kilmazing

Используйте position:fixed и bottom:0, чтобы получить то, что вы хотите

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

источник

2015-07-04 13:15:43 Hemal

Нижний колонтитул позиции внизу

ответ

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