Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Как прижать блок к низу документа? (https://javascript.ru/forum/xhtml-html-css/37904-kak-prizhat-blok-k-nizu-dokumenta.html)

1Dmitry 13.05.2013 13:34
Как прижать блок к низу документа?
 
<body>
<section class="catalog"></section>
<footer></footer>
</body>

Код:
.catalog{
    width: 100%;
    height: 100%;
    background: url("/images/background-intro.png") repeat;
    padding: 40px 0 50px 0;
}
footer{
    height: 5px;
    width: 100%;
    background-color: #375da8;
}
вот сейчас получается, что высота контента внутри секции меньше, чем высота самого документа, и получается отступ снизу под футером, как это можно исправить?

animhotep 13.05.2013 14:05
в этом примере будет вертикальный скрол, как прижать блок к низу можно узнать погуглив фразу CSS Sticky Footer

1Dmitry 13.05.2013 14:18
да, мне это и нужно и нужно, а как тогда сделать чтобы 
<section class="catalog"></section>
растянулся до самого низа документа? (высота внутренних элементом там не хватит)

animhotep 13.05.2013 14:21
нужно документу задать height: 100%;
тоесть 
html, body{
height: 100%;
}

1Dmitry 13.05.2013 14:34
теперь слишком большой отступ получается :cray: где то 2/3 прокручивать нужно

animhotep 13.05.2013 14:37
выложите рабочий пример в http://learn.javascript.ru/play
не понятно что нужно
отсуп будет т.к. он задан в padding: 40px 0 50px 0;

1Dmitry 13.05.2013 15:10
http://learn.javascript.ru/play/4QcHVb вот только сохрани у себя как .html а то там этой проблемы не видно

ksa 13.05.2013 15:32
Цитата:
Сообщение от 1Dmitry
Как прижать блок к низу документа?
Да хоть бы так...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html,
body {
	height: 100%;
}
#catalog {
	min-height: 100%;
	background-color: blue;
}
footer,
#footer_tab {
	height: 100px;
}
#footer_tab {
	clear: both;
}
footer {
	margin-top: -100px;;
	background-color: red;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<html> 
<body> 
<section id="catalog">
	<div id='footer_tab'></div>
</section>
<footer></footer>
</body>
</html>

1Dmitry 13.05.2013 15:45
наверное всему виной мои кривые руки, покажи пожалуйста на этом примере http://learn.javascript.ru/play/4QcHVb чтобы без большого отступа снизу было

1Dmitry 13.05.2013 15:47
просто когда делаю 
html,
body {
	height: 100%;
}
появляется слишком большой скрол.

animhotep 13.05.2013 15:53
<nav> нужно поставить внутрь .catalog и убрать в нём padding

ksa 13.05.2013 15:55
Цитата:
Сообщение от 1Dmitry
покажи пожалуйста на этом примере http://learn.javascript.ru/play/4QcHVb
Букав у тебя там много... :D
По первой прикидке, вроде вот так
http://learn.javascript.ru/play/fgNBN

ksa 13.05.2013 15:56
Цитата:
Сообщение от 1Dmitry (Сообщение 250221)
просто когда делаю 
html,
body {
	height: 100%;
}
появляется слишком большой скрол.
У меня его нет... Т.ч. либо мой пример обсуждаем, или какую-то твою кашу... :)

1Dmitry 13.05.2013 16:08
Цитата:
Сообщение от ksa (Сообщение 250224)
У меня его нет... Т.ч. либо мой пример обсуждаем, или какую-то твою кашу... :)
угу, это у меня такое, в твоем примере все ок :cray:

1Dmitry 13.05.2013 16:12
вот этот отступ убрать нужно

1Dmitry 13.05.2013 16:17
Цитата:
Сообщение от ksa (Сообщение 250224)
У меня его нет... Т.ч. либо мой пример обсуждаем, или какую-то твою кашу... :)
Цитата:
Сообщение от animhotep (Сообщение 250222)
<nav> нужно поставить внутрь .catalog и убрать в нём padding
не так нельзя, так уже в макете фреймворка

ksa 14.05.2013 08:52
Цитата:
Сообщение от 1Dmitry
вот этот отступ убрать нужно
Делай минимальный тестовый пример - на нем покажем. Длальше сам добавляй контент.
А в какой-то каше забесплатно нет желания возиться...

1Dmitry 14.05.2013 11:46
да, я с вами уже согласен, уже понял откуда берется скрол для вот на вашем примере 
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html,
body {
	height: 100%;
}
#catalog {
	min-height: 100%;
	background-color: blue;
}
footer,
#footer_tab {
	height: 5px;
}
#footer_tab {
	clear: both;
}
footer {
	margin-top: -5px;;
	background-color: red;
}
nav{
    width: 960px;
    height: 80px;
    margin: 0 auto;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<html> 
<body> 
<nav></nav>
<section id="catalog">
	<div id='footer_tab'></div>
</section>
<footer></footer>
</body>
</html>

получается, он опускается в низ еще на 80 пикселей, и-за меню, как это можно исправить?

animhotep 14.05.2013 12:19
меню и футер должны быть В блоке, высота которого 100%
като так например http://learn.javascript.ru/play/NVul7

1Dmitry 14.05.2013 12:40
спасибо, этот вариант работает

ksa 14.05.2013 14:30
Цитата:
Сообщение от animhotep
меню и футер должны быть В блоке, высота которого 100%
Меню обязательно. А вот футер может быть и после, как в моем варианте...

1Dmitry 14.05.2013 17:12
обязательно это для верстки, или на семантику как-то влияет?

ksa 15.05.2013 13:11
Цитата:
Сообщение от 1Dmitry
обязательно это для верстки, или на семантику как-то влияет?
Какой-то элемент таки должен занять те 100% высоты. Остальные элементы "пляшут" от этого элемента...

kitevs3 22.05.2013 17:39
Спасибо, была та же проблема, почитала ветку и решила ее, благодарю.

sphere89 15.06.2013 02:33
Ну так маргин отрицательный равный высоте блока добавить надо.

maximum454 18.03.2014 10:16
Если нужно прижать футер то тут подробная инструкция http://www.xiper.net/collect/html-an...al-k-nizu.html


Часовой пояс GMT +3, время: 19:10.