| 1Dmitry | 13.05.2013 16:12 |
вот этот отступ убрать нужно 
Как прижать блок к низу документа?
<body> <section class="catalog"></section> <footer></footer> </body> Код:
.catalog{ |
в этом примере будет вертикальный скрол, как прижать блок к низу можно узнать погуглив фразу CSS Sticky Footer
|
да, мне это и нужно и нужно, а как тогда сделать чтобы
<section class="catalog"></section>растянулся до самого низа документа? (высота внутренних элементом там не хватит) |
нужно документу задать height: 100%;
тоесть
html, body{
height: 100%;
}
|
теперь слишком большой отступ получается :cray: где то 2/3 прокручивать нужно
|
выложите рабочий пример в http://learn.javascript.ru/play
не понятно что нужно отсуп будет т.к. он задан в padding: 40px 0 50px 0; |
http://learn.javascript.ru/play/4QcHVb вот только сохрани у себя как .html а то там этой проблемы не видно
|
Цитата:
<!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>
|
наверное всему виной мои кривые руки, покажи пожалуйста на этом примере http://learn.javascript.ru/play/4QcHVb чтобы без большого отступа снизу было
|
просто когда делаю
html,
body {
height: 100%;
}
появляется слишком большой скрол. |
<nav> нужно поставить внутрь .catalog и убрать в нём padding
|
Цитата:
По первой прикидке, вроде вот так http://learn.javascript.ru/play/fgNBN |
Цитата:
|
Цитата:
|
вот этот отступ убрать нужно
|
Цитата:
Цитата:
|
Цитата:
А в какой-то каше забесплатно нет желания возиться... |
да, я с вами уже согласен, уже понял откуда берется скрол для вот на вашем примере
<!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 пикселей, и-за меню, как это можно исправить? |
меню и футер должны быть В блоке, высота которого 100%
като так например http://learn.javascript.ru/play/NVul7 |
спасибо, этот вариант работает
|
Цитата:
|
обязательно это для верстки, или на семантику как-то влияет?
|
Цитата:
|
Спасибо, была та же проблема, почитала ветку и решила ее, благодарю.
|
Ну так маргин отрицательный равный высоте блока добавить надо.
|
Если нужно прижать футер то тут подробная инструкция http://www.xiper.net/collect/html-an...al-k-nizu.html
|
| Часовой пояс GMT +3, время: 15:35. |