ФорумРазработкаКлиентская сторонаВерстка и оформление → div left height 100%

div left height 100%

  • sweet15w

    Сообщения: 139 Репутация: N Группа: Кто попало

    Spritz 13 сентября 2011 г. 1:14

    css:
    * { margin: 0; padding: 0; }
    html { height: 100%; }
    body { font: 12px/18px Arial, Tahoma, Verdana, sans-serif; height: 100%; }
    #wrapper { width: 100%; min-width: 1000px; min-height: 100%; height: auto !important; height: 100%; background: pink; }
    #header { height: 150px; background: yellow; }
    #middle { width: 100%; padding: 0 0 100px; height: 1%; position: relative; }
    #middle:after { content: '.'; display: block; clear: both; visibility: hidden; height: 0; }
    #container { width: 100%; float: left; overflow: hidden; }
    #content { padding: 0 270px 0 270px; }
    #sideLeft { float: left; width: 250px; margin-left: -100%; position: relative; background: red; }
    #sideRight { float: left; margin-right: -3px; width: 250px; margin-left: -250px; position: relative; background: green; }
    #footer { margin: -100px auto 0; min-width: 1000px; height: 100px; background: blue; position: relative; }


    html:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
    <!–[if lte IE 6]><link rel="stylesheet" href="style_ie.css" type="text/css" media="screen, projection" /><![endif]–>
    </head>
    <body>
    <div id="wrapper">
    <div id="header">header</div>
    <div id="middle">
    <div id="container">
    <div id="content">content</div>
    </div>
    <div class="sidebar" id="sideLeft">left</div>
    <div class="sidebar" id="sideRight">right</div>
    </div>
    </div>
    <div id="footer">footer</div>
    </body>
    </html>


    1. а как левый и правый дивы растянуть на всю высоту и возможно ли это вообще?
    2. а как внутри дивов затем элементы растягивать на всю высоту и возможно ли это вообще?
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 13 сентября 2011 г. 2:48, спустя 1 час 33 минуты 46 секунд

    1. нет
    2. нет
    Высокоуровневое абстрактное говно
  • AlexB

    Сообщения: 4290 Репутация: N Группа: в ухо

    Spritz 13 сентября 2011 г. 3:05, спустя 16 минут 55 секунд


    1. нет
    2. нет
    Таблицы рулят ))))))))))))
  • artoodetoo

    Сообщения: 5139 Репутация: N Группа: в ухо

    Spritz 13 сентября 2011 г. 3:24, спустя 19 минут 34 секунды

    Таблицы рулят, это факт. Никаких танцев с бубном.

    Но про одинакововысокие колонки тоже есть миллион примеров. Конкретное решение зависит от задачи.
    http://www.alistapart.com/articles/multicolumnlayouts/
    http://www.positioniseverything.net/articles/onetruelayout/equalheight
    http://www.satzansatz.de/cssd/columnswapping.html
    ιιlllιlllι унц-унц
  • sweet15w

    Сообщения: 139 Репутация: N Группа: Кто попало

    Spritz 13 сентября 2011 г. 4:06, спустя 42 минуты 1 секунду

    суть то не в одинаковости колонок левой и правой…. а в том, чтобы на всю высоту сделать их :(
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 13 сентября 2011 г. 4:11, спустя 4 минуты 28 секунд

    position:absolute;
    top:0;
    bottom:0;
    Спустя 14 сек.
    с последствиями
    Высокоуровневое абстрактное говно
  • artoodetoo

    Сообщения: 5139 Репутация: N Группа: в ухо

    Spritz 13 сентября 2011 г. 7:09, спустя 2 часа 57 минут 45 секунд


    суть то не в одинаковости колонок левой и правой…. а в том, чтобы на всю высоту сделать их :(

    другими словами — чтобы были одинаковой высоты )))

    или таки что?
    ιιlllιlllι унц-унц
  • sweet15w

    Сообщения: 139 Репутация: N Группа: Кто попало

    Spritz 30 сентября 2011 г. 1:10, спустя 16 дней 18 часов 1 минуту

    дк суть то в чем… чтобы так сказать… видеть сайт - на всю страницу… даже если мало контента… а там уж как диз выглядит…
  • Givi

    Сообщения: 2284 Репутация: N Группа: Адекваты

    Spritz 30 сентября 2011 г. 2:10, спустя 59 минут 31 секунду

    sweet15w, реально сделать. Но сама реализация зависит от задачи:
    1. Можно сделать все только визуально на всю высоту страницы, а в реале колонка будет только на высоту блока, границы которого не видно. По сути делается это градиентной заливкой в основном блоке обертке, высота которого имеет уже реальную 100% высоту страницы.
    2. Можно потанцевать с бубном. Но тут нужно учесть что конечный результат в большинстве случаем будет не масштабируемым, то есть если мы сверстали какую-то структуру документа, то при существенном изменении её основ придется заново танцевать с бубном.
    3. Не ипать моск и заюзать таблицы. Страшного в этом ничего нет. Хотя, я бы старался до последнего так не делать, но это потому что я это я, то есть по большей мере дело принципа.

    По сути 1 вариант часто применим и многих устраивает.
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 30 сентября 2011 г. 3:11, спустя 1 час 1 минуту 10 секунд

    а не проще показать пальцем где/что/куда/зачем/почему, а там мы уж точно все поймем и подскажем
    Высокоуровневое абстрактное говно
  • artoodetoo

    Сообщения: 5139 Репутация: N Группа: в ухо

    Spritz 1 октября 2011 г. 3:54, спустя 1 день 43 минуты

    sweet15w, еще раз - с таблицами все просто.
    но если ты такой упертый, можно и так. делай шаг за шагом. сначала добейся чтобы страница была "во всю высоту". вот прекрасный пример http://ryanfait.com/sticky-footer/
    а потом уже имитируй свою бесконечную левую колонку с помощью бекграунда или воспользуйся моими ссылками выше.
    ιιlllιlllι унц-унц
  • kimi2k

    Сообщения: 1 Репутация: N Группа: Кто попало

    Spritz 10 октября 2011 г. 15:12, спустя 9 дней 11 часов 18 минут

    к слову… иногда проще воспользоваться таблицей, чем div с огромным количеством хаков (с)

    Кто сказал что уместное использование таблиц является дурным тоном?
    В добавок не забываем, что нагромождения дивов с сопутствующими классами увеличивают объем документа, что не есть гуд
  • Sinkler

    Сообщения: 7931 Репутация: N Группа: в ухо

    Spritz 10 октября 2011 г. 15:19, спустя 6 минут 24 секунды

    у меня ощущение, что кафе регает по юзверю в час и смотрит, какой из них будет популярнее
  • Tekuto

    Сообщения: 1147 Репутация: N Группа: Адекваты

    Spritz 10 октября 2011 г. 15:20, спустя 1 минуту 26 секунд

    у меня ощущение, что кафе регает по юзверю в час и смотрит, какой из них будет популярнее


    у меня такое ощущение, что вы в любом юзвере теперь ищите Кафешку
    А говорили, что вам похуй на его уход.

    Скучаете по нему, бабки XDDD
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 10 октября 2011 г. 15:21, спустя 1 минуту 27 секунд

    Tekuto, он твой акк взломал?
    Сапожник без сапог

Пожалуйста, авторизуйтесь, чтобы написать комментарий!