Как приклеить текст к нижней части страницы? - PullRequest
17 голосов
/ 11 мая 2010

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

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

Ответы [ 5 ]

22 голосов
/ 11 мая 2010

Возможно, вы захотите поместить абсолютно выровненный 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>
20 голосов
/ 11 мая 2010

Попробуйте:

.bottom {
    position: fixed;
    bottom: 0;
}
9 голосов
/ 11 мая 2010

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

 <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>
0 голосов
/ 18 января 2019

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

#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>
0 голосов
/ 09 сентября 2017

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...