Форум

1Dmitry · #1 (**permalink**) 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 · #2 (**permalink**) 13.05.2013, 14:05

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

1Dmitry · #3 (**permalink**) 13.05.2013, 14:18

да, мне это и нужно и нужно, а как тогда сделать чтобы

<section class="catalog"></section>

растянулся до самого низа документа? (высота внутренних элементом там не хватит)

animhotep · #4 (**permalink**) 13.05.2013, 14:21

нужно документу задать height: 100%;
тоесть

html, body{
height: 100%;
}

1Dmitry · #5 (**permalink**) 13.05.2013, 14:34

теперь слишком большой отступ получается

где то 2/3 прокручивать нужно

animhotep · #6 (**permalink**) 13.05.2013, 14:37

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

1Dmitry · #7 (**permalink**) 13.05.2013, 15:10

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

ksa · #8 (**permalink**) 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 · #9 (**permalink**) 13.05.2013, 15:45

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

1Dmitry · #10 (**permalink**) 13.05.2013, 15:47

просто когда делаю

html,
body {
	height: 100%;
}

появляется слишком большой скрол.

Форум

Справочник

Discord чат

Курсы javascript