The OpenNET Project / Index page

[ новости /+++ | форум | wiki | теги | ]

форумы  помощь  поиск  регистрация  майллист  вход/выход  слежка  RSS
"CSS-верстка "
Вариант для распечатки  
Пред. тема | След. тема 
Форумы WEB технологии (Public)
Изначальное сообщение [ Отслеживать ]

"CSS-верстка "  
Сообщение от Александр (??) on 24-Июл-08, 16:46 
Имеется следующий макет:
+-----------------+-------+
|                         |           |
|     left              | right  |
|                         |           |
+-----------------+          |
|     footer         |           |
+-----------------+-------+

<div id="leftContainer">
   <div id="left"></div>
   <div id="footer"></div>
</div>
<div id="right"></div>

слой footer должен быть всегда в самом низу, независимо о того, на сколько растянуты содержимым слои left или right.
как написать кросс-браузерную css для данного макета?
я делал так:

html, body {
  height: 100%;
}
#leftContainer {
  height: 100%;
  width: 500px;
  float: left;
}

#left {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}

#footer {
  height: 40px;
}

таким способом не работает. Если, например, в слое right текст не помещается на один экран, то слой footer не опускается

Высказать мнение | Ответить | Правка | Cообщить модератору

 Оглавление

  • CSS-верстка , andy, 05:41 , 25-Июл-08, (1)  
    • CSS-верстка , Александр, 11:54 , 25-Июл-08, (2)  
      • CSS-верстка , Александр, 12:13 , 25-Июл-08, (3)  

Сообщения по теме [Сортировка по времени | RSS]


1. "CSS-верстка "  
Сообщение от andy (??) on 25-Июл-08, 05:41 
может, что-то навроде этого подойдет?

<html>
<head>
<title>test</title>
<style type="text/css">
html { margin:0; padding:0; }
body { margin:0; padding:0 10%; }
#outer { width:100%; background:#cef; }
#right { float:right; width:200px; background:#fec; }
#left { margin-right:210px; background:#ecf; }
#more-left-text { display:none; }
#footer { clear:both; margin-right:210px; background:#f90; }
</style>
</head>
<body>
<h1>test</h1>
<div id="outer">
  <div id="right">
    <p>текст</p>
  </div>
  <div id="left">
    <p>текст</p>
    <div id="more-left-text">
      <p>еще текст</p>
    </div>
  </div>
  <div id="footer">
    <p>текст</p>
  </div>
</div>
</body>
</html>

Высказать мнение | Ответить | Правка | Наверх | Cообщить модератору

2. "CSS-верстка "  
Сообщение от Александр (??) on 25-Июл-08, 11:54 
так просто.. спасибо :)
Высказать мнение | Ответить | Правка | Наверх | Cообщить модератору

3. "CSS-верстка "  
Сообщение от Александр (??) on 25-Июл-08, 12:13 
нет, всё-таки не то..
нужно, что бы right растягивался на 100% высоту
Высказать мнение | Ответить | Правка | Наверх | Cообщить модератору

Архив | Удалить

Индекс форумов | Темы | Пред. тема | След. тема
Оцените тред (1=ужас, 5=супер)? [ 1 | 2 | 3 | 4 | 5 ] [Рекомендовать для помещения в FAQ]




Спонсоры:
Inferno Solutions
Hosting by Hoster.ru
Хостинг:

Закладки на сайте
Проследить за страницей
Created 1996-2021 by Maxim Chirkov
Добавить, Поддержать, Вебмастеру