Как вставить текст в нижнюю часть страницы?

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

Как я могу достичь этой простой цели?

Ответ 1

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

<div style="position: relative;background-color: blue; width: 600px; height: 800px;">    

    <div style="position: absolute; bottom: 5px; background-color: green">
    TEST (C) 2010
    </div>
</div>

Ответ 2

Try:

.bottom {
    position: fixed;
    bottom: 0;
}

Ответ 3

Попробуйте это

 <head>
 <style type ="text/css" >
   .footer{ 
       position: fixed;     
       text-align: center;    
       bottom: 0px; 
       width: 100%;
   }  
</style>
</head>
<body>
    <div class="footer">All Rights Reserved</div>
</body>

Ответ 4

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

Ответ 5

Вот как я это сделал.

#copyright {
	float: left;
	padding-bottom: 10px;
	padding-top: 10px;
	text-align: center;
	bottom: 0px;
	width: 100%;
}

		<div id="copyright">
		Copyright 2018 &copy; Steven Clough
		</div>

Ответ 6

Старый поток, но... Ответ от Konerak работает, но почему вы даже задали размер контейнера по умолчанию. Я предпочитаю использовать код везде, где бы ни был большой размер страницы. Так вот мой код:

<style>
   #container {
    position: relative;
    height: 100%;
 }
 #footer {
    position: absolute;
    bottom: 0;
 }
</style>

</HEAD>

<BODY>

 <div id="container">

    <h1>Some heading</h1>

<p>Some text you have</p> 

<br>
<br>

<div id="footer"><p>Rights reserved</p></div>

</div>

</BODY>
</HTML>

Трюк находится в <br>, где вы разрываете новую строку. Итак, когда страница маленькая, вы увидите нижний колонтитул внизу страницы, как хотите.

НО, когда страница большая, ТАК, ЧТО ВЫ ДОЛЖНЫ ПРОКРУТИТЬ ЭТО ВНИЗ, тогда ваш нижний колонтитул будет состоять из двух новых строк под всем содержимым выше. И если вы сделаете страницу больше, ваш нижний колонтитул всегда будет идти вниз. Надеюсь, кто-то найдет это полезным.