Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Сайт без хеадера


Автор: mmmoi 15.10.2012, 10:05
Проблема такая
Есть центральный блок с фиксированной шириной,который распологается по центру окна (слева и справа).У этого блока должен быть отступ сверху 200px и снизу 150px,а все остально занимает этот блок ( ограничиваясь этими отступами по высоте).Причем внизу будет блок ссылок(подвал) высотой 150px прижатый к низу всегда.

Как добиться ,чтобы блок занимал все место по вертикали ,ограничиваясь только отступами+ подвал был прижат всегда снизу?

Ссылка на картинку ниже

Автор: Се ля ви 15.10.2012, 17:01
Вообще, читай учебник в блоге Ивана Сагалаева. В частности, приём, который тебе нужен прекрасно расписан в http://softwaremaniacs.org/blog/2006/01/17/css-layout-example/. Но если коротко, то делается это примерно так:
Код
html {
    padding: 0;
    margin: 200px auto 150px auto;
    width: 1180px; /* твоя фиксированная ширина */
    height: 100%;
}

body { min-height: 100%; }
* html body { height:100%; } /* исправляем баг в старых версиях IE */

#footer { /* id`шник div`а, который у тебя должен быть внизу */
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px; /* У данного приёма есть недостаток - придётся жёстко фиксировать высоту подвала, иначе текст сверху будет подлезать под него */
}
#body { /* id`шник элемента (напр., div`а), который идёт непосредственно перед "подвалом" (элементом #footer) */
    padding-bottom: 60px; /* Тот же самый отступ делаем. Если высота footer`а изменится - придётся её тут менять вручную... */
}

А вообще, если хочешь разобраться в том, как правильно верстать, советую вообще почитать http://softwaremaniacs.org/blog/category/web/primer/- прекрасные статьи, лучше ничего ни в сети, ни в книгах я не видел - коротко, ясно, доступно и главное - легковесно.

Автор: mmmoi 15.10.2012, 20:56
Спасибо.Информация дорогого стоит. smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)