Q:

Как задать div до конца страницы

задача состоит в том, чтобы задать блок div до конца страницы, типо копирайт, как и на этой странице, однако если на странице текста мало, то этот блок не дотягивает до нижнего края. Даже если устанавливаю отрицательный margin-bottom все равно остается маленькая полосочка
.copyright {
    padding:5px;
    padding-top:20px;
    background-color:#e4e4e4;
    margin-top: 5px;
    margin: auto;
    clear: both;
}

<div class="copyright">
    <span class="copyright-text">1</span><br />
    <span class="copyright-text">2</span><br />            
    <span class="copyright-text">3</span><br />   
    <span class="copyright-text">4</span><br />   
</div>

A:

Вы это имели введу? пример

html{
  position: relative;
  min-height: 100%;
}

.wrapper {
  margin-bottom: 100px;
}

.content {
  width: 450px;
  margin: 0 auto;
  padding: 20px;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: #666;
}
<div class="wrapper">
  <div class="content">
    <p>Каждый веб-разработчик знает, что такое текст-«рыба». Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д. Так как цель применения такого текста исключительно демонстрационная, то и смысловую нагрузку ему нести совсем необязательно. Более того, нечитабельность текста сыграет на руку при оценке качества восприятия макета.
Самым известным «рыбным» текстом является знаменитый Lorem ipsum. Считается, что впервые его применили в книгопечатании еще в XVI веке. Своим появлением Lorem ipsum обязан древнеримскому философу Цицерону, ведь именно из его трактата «О пределах добра и зла» средневековый книгопечатник вырвал отдельные фразы и слова, получив текст-«рыбу», широко используемый и по сей день. Конечно, возникают некоторые вопросы, связанные с использованием Lorem ipsum на сайтах и проектах, ориентированных на кириллический контент – написание символов на латыни и на кириллице значительно различается.
И даже с языками, использующими латинский алфавит, могут возникнуть небольшие проблемы: в различных языках те или иные буквы встречаются с разной частотой, имеется разница в длине наиболее распространенных слов. Отсюда напрашивается вывод, что все же лучше использовать в качестве «рыбы» текст на том языке, который планируется использовать при запуске проекта. Сегодня существует несколько вариантов Lorem ipsum, кроме того, есть специальные генераторы, создающие собственные варианты текста на основе оригинального трактата, благодаря чему появляется возможность получить более длинный неповторяющийся набор слов.
</p>
    <div class="footer">
      footer
    </div>
  </div>
</div>

