Разтянуть div по высоте

Тема в разделе "Верстка", создана пользователем 1Dreamweaver1, 30 июн 2011.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. 1Dreamweaver1

    1Dreamweaver1

    Регистр.:
    5 янв 2008
    Сообщения:
    417
    Симпатии:
    44
    Раcтянуть div по высоте

    Структура из двух колонок: слево - rounсoner, справо - основной контент.
    Подскажите каким образом можно раcтянуть левую чась (rounсoner) по высоте, в зависимости от сонтента (правой колонки).
    Код:
    .toppart{
    background: url(../images/corners/top.gif) top left no-repeat;
    width:148px;
    height:6px;
    overflow:hidden;
    }
    .middlpart {
    background: url(../images/corners/middle.gif) top left repeat-y;
    }
    .bottompart{
    background: url(../images/corners/bottom.gif) bottom left no-repeat;
    width:148px;
    height:14px;
    }
    .centercol {
    float:right;
    width:500px;
    margin:0px auto;
    }
    <div id="main">
     <div class="leftcol">
        <div class="toppart"></div>
            <div class="middlpart">
    	   <div id="leftnavigation"> Navigation here </div>
            </div>
              <div class="bottompart"></div>
     </div>
     <div class="rightcol">
     right content 
    </div>
    </div>
     

    Вложения:

    • sample.jpg
      sample.jpg
      Размер файла:
      3,6 КБ
      Просмотров:
      4
  2. rombikr

    rombikr Постоялец

    Регистр.:
    9 июн 2011
    Сообщения:
    50
    Симпатии:
    4
    Можно javascript'ом сравнивать высоту столбцов и выравнивать по самому длинному. Или самый простой вариант сделать колонки табтицей.
     
  3. zek24

    zek24

    Moderator
    Регистр.:
    14 ноя 2009
    Сообщения:
    780
    Симпатии:
    238
    Перепишите файлы из архива в папку "js" рядом с папками "images" "css".
    Укажите в "head" через script пути к файлам из архива
    В файле equalHeight.js в строке
    Код:
    setEqualHeight($("#leftSidebar,#content"));
    замените #leftSidebar,#content на свои id.
    Удачи!
     

    Вложения:

    • SameHeight.rar
      Размер файла:
      27,9 КБ
      Просмотров:
      10
    gotmeth, mikas3025, 1Dreamweaver1 и ещё 1-му нравится это.
  4. mikas3025

    mikas3025 Постоялец

    Регистр.:
    23 дек 2007
    Сообщения:
    107
    Симпатии:
    7
    А других вариантов, кроме предложенных двух - таблицу сделать и джавой, быть не может?
    Делал специально без таблиц, а джава - элемент мне совсем не понятный. Тем более папки "CSS" нет вовсе, а папка "images" на один уровень выше находится (attachments\SC\), чем папка "user_mika" (attachments\SC\themes\user_mika), в которой есть файл "index.html" и файл стилей "main.css".
     
  5. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.451
    Симпатии:
    677
    Я просто в шоке!!!
    Зайдёт человек с выключенным js и весь дизайн развалится.
    Даже комментировать не хочу по коду. Учите css - ну это совсем школа.
     
  6. dandandan

    dandandan

    Регистр.:
    7 авг 2008
    Сообщения:
    996
    Симпатии:
    268
    http://habrahabr.ru/blogs/css/64173/
    Вот вам пример 4 способа как создать блоки одинаковой высоты.