На главную Наши проекты:
Журнал   ·   Discuz!ML   ·   Wiki   ·   DRKB   ·   Помощь проекту
ПРАВИЛА FAQ Помощь Участники Календарь Избранное RSS
msm.ru
Модераторы: Vasya2000, Serafim, fatalist
  
> Задать размеры всплывающего дочернего элемента , каким образом?
    Есть примерно такой код на странице:
    ExpandedWrap disabled
      <div>
          <div class="col-sm-4">
              <ul class="tt-list" style="position: relative;">
                  <li class="tt-item">
                      <div class="tt-submenu"  style="position: absolute; right: 0px; top: 0px; width: ???;">
                          <div class="tt-content">
                          </div>
                      </div>
                  </li>
                  <li>...</li>
                  ...
              <ul>
          </div>
          <div class="col-sm-8">
          </div>
      </div>
    используется bootstrap.
    Чтобы было понятно, это реализация меню.

    При наведении на li.tt-item становится активными дочерние DIV'ы, как сделать так, чтобы они заняли максимум <div class="col-sm-8">???
    Другими словами задать width в зависимости от ширины col-sm-8, а height в зависимости от наполненности...
    Если поняли о чем речь!
      На данный момент пока только 1 вариант решения проблемы, jQuery, но вот интересно, всё же есть вариант как это решить с помощью CSS?
        ViGOur, выкинь всю страницу HTML+CSS. Ниче не обещаю, но так глядеть проще.
          Может, так?
          ExpandedWrap disabled
            left: 100%; top: 0; width: 200%;
            AVA12, в точку!
            Выровнялись по ширине, а по высоте как-то можно?

            Понятно, что height: 100%, но при этом будет артефакт, когда дочка больше родителя и вылезает за его пределы (в данном случае за пределы корневого div), со всеми вытекающими...

            з.ы. я полный ноль в CSS, так что извините если вопросы примитивные... :rolleyes:
            Сообщение отредактировано: ViGOur -
              Цитата
              Понятно, что height: 100%, но при этом будет артефакт, когда дочка больше родителя и вылезает за его пределы

              Что за артефакт? Что рисуется и что должно рисоваться? Продемонстрируй проблему. Ну или опиши словами, как все сверстано и как должно выглядеть и работать.
                Прикреплённый файлПрикреплённый файлmenu_example_art_0.jpg (97,97 Кбайт, скачиваний: 620)
                Пример на прикрепленной картинке...
                  Ясно, проблема в том, что содержимое внутреннего блока переполняет внешний. Насколько я понимаю, нужно чтобы в таких случаях содержимое внутреннего блока скроллилось. В этом случае для внутреннего блока надо задать
                  ExpandedWrap disabled
                    max-height: 100%; overflow: auto;

                  Впрочем, могут быть сюрпризы в зависимости от реально используемых стилей для всего этого.
                    overflow: auto; я пробовал до этого.
                    Из-за этого scroll появляется, а мне хотелось бы сделать так, чтобы родитель становился такого же размера как дочка, это же меню, потому, для него в самый раз!
                      Просто решаемо

                      Меню контейнер (Граница куда максимом можно) - позиция релатив (или абсолютная) (Главный див в примере)
                      В каждом tt-item сделать ещё div для надписи (ширина 33%)
                      tt-submenu тогда получаеться так - top: 0, left: 33%, bottom: 0, right: 0

                      Пример тут - https://jsfiddle.net/v6f3c8at/1/
                      Сообщение отредактировано: SergeS -
                      0 пользователей читают эту тему (0 гостей и 0 скрытых пользователей)
                      0 пользователей:


                      Рейтинг@Mail.ru
                      [ Script execution time: 0,0376 ]   [ 17 queries used ]   [ Generated: 28.03.24, 12:50 GMT ]