Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 17.07.2011, 16:10   #1
Munk
Новичок
Джуниор
 
Регистрация: 17.07.2011
Сообщений: 1
По умолчанию header и footer(всегда прилеплен снизу) фиксированной высоты, резиновый контент в центре с полосой прокрутки

Подскажите как реализовать такой макет правильнее?
Этот неправильно отображается в старых IE, мобильных браузерах, возможно где-то ещё..

http://jsfiddle.net/QeW7E/

Код:
<!DOCTYPE html>
<html lang="ru" >
<head>
  <meta charset="utf-8" />
  <style>
  * { margin:0; padding:0}
  body { width:100%; height:100%; background:#CCC;}
  #wrapper { width:1000px; height:100%; margin:0 auto;}
  #header { width:100%; height:200px; position:absolute; top:0; background:#EEE;}
  #content { width:1000px; position:absolute; top:200px; bottom:200px; background:#999;}
  .sidebar-left, .sidebar-right {float: left; width: 200px; height: 100%;}
  #center { width:600px; height:100%; float:left; margin:0 auto; overflow:auto; background:#FFF;}
  .min_height { min-height:200px;}
  #footer { width:100%; height:200px; position:absolute; bottom:0; background:#666;}
  </style>
</head>
<body>
  <div id="footer">footer</div>
  <div id="header">header</div>
  <div id="wrapper">
    <div id="content" class="min_height">
      <div class="sidebar-left min_height">sidebar left</div>
      <div id="center" class="min_height">
        <div id="main-content">
         м<br/>н<br/>о<br/>г<br/>о<br/> р<br/>а<br/>з<br/>н<br/>ы<br/>х<br/> б<br/>у<br/>к<br/>в<br/>
         м<br/>н<br/>о<br/>г<br/>о<br/> р<br/>а<br/>з<br/>н<br/>ы<br/>х<br/> б<br/>у<br/>к<br/>в<br/>
         м<br/>н<br/>о<br/>г<br/>о<br/> р<br/>а<br/>з<br/>н<br/>ы<br/>х<br/> б<br/>у<br/>к<br/>в<br/> 
        </div>
      </div>
      <div class="sidebar-right min_height">sidebar right</div>
    </div>
  </div>
</body>
</html>
Munk вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
skipped when looking for precompiled header use, warning C4627 Почему пропущен header ? malor Visual C++ 3 26.06.2011 12:25
Резиновый Header из 3-х изображений vladka HTML и CSS 0 07.12.2010 12:38
footer Alex_manu HTML и CSS 1 17.07.2010 00:29
Как заставить ролик на мышке двигать полосой прокрутки clanz Microsoft Office Access 4 28.02.2010 16:41
Всегда позади и всегда впереди в одном приложении Legat Win Api 4 27.10.2007 15:48