WedX - журнал о программировании и компьютерных науках

Как заставить родительский элемент расти вместе с содержимым с помощью JQuery

Кажется, я не могу понять это правильно. Я все время пытался найти решение, позволяющее иметь 3 встроенных блока, которые будут расти до самого высокого содержимого с вертикальными границами. Это границы, которые делают это таким трудным. Если бы мне не нужны были рамки, я был бы в порядке, но я не могу без них.

То, что у меня есть, работает, вроде... Если я изменяю размер окна браузера, а левый элемент самый высокий, все выглядит нормально; все границы равны 100%, а родительский элемент div растет вместе с содержимым внутри.

Однако, если центральный или правый div имеет самое высокое содержимое, вертикальные границы не достигают 100%. Я подумал, чтобы исправить это, я бы дал среднему и правому элементам высоту 100%. Это сводит границы к земле, когда я изменяю размер, но теперь родитель больше не растет с самым высоким элементом, и содержимое вытекает. пожалуйста, смотрите прикрепленный рисунок.

Может кто-нибудь, пожалуйста, помогите мне исправить это? Прямая трансляция на JSBin

<!DOCTYPE html>
<html>
  <head>
    <style>
      #wrapper {
        float:left;
        width:100%;
        border-top:1px solid #000;
        border-bottom:2px solid #000;
      }
      #wrapper .col {
        float:left;
        width:33%;
        display:inline-block;
      }
      #wrapper .col:nth-child(1) {
        border-right:2px solid #000;
     }
      #wrapper .col:nth-child(2) {
        border-right:2px solid #000;
        height:100%;
      }
      #wrapper .col div {
        padding:10px;
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
      $(window).on('load resize', function(){
        var $div = $('#wrapper .col');
        var max = 0;
        $.each($div, function(){
          if(parseInt($(this).outerHeight()) > max){
            max = parseInt($(this).outerHeight())
            $("#wrapper").css('height', max + 'px');
          }
        });
      }).resize();
    </script>
  </head>
  <body>
    <div id="wrapper">
      <div class="col">
1<br>
1<br>
1<br>
      </div>
      <div class="col">
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
      </div>
      <div class="col">
1<br>
1<br>
      </div>
    </div>
  </body>
</html>

Вот как это выглядит: введите здесь описание изображения

ИЗМЕНИТЬ:

Я хотел бы добавить, что если у кого-то есть лучший способ добиться того, что я пытаюсь сделать, я очень открыт.

14.03.2014

  • почему вы используете parseInt? это можно сделать без parseInt. 14.03.2014
  • C-Link, это фрагмент, который я получил от SO. Я не эксперт по JavaScript, поэтому, возможно, это не то, что мне нужно. 14.03.2014
  • Разве вы не сможете исправить это, переключив display на display: table-cell; и display: table-row; на родителя? 14.03.2014
  • @ user3008011, как оказалось, это было именно то решение. Спасибо, что упомянули об этом. 14.03.2014

Ответы:


1

Для этого вам не нужен javascript, вы можете сделать это с помощью html и css.

https://jsfiddle.net/wf_4/Puu3u/

CSS:

 #wrapper {
    width:100%;
    border-top:1px solid #000;
    border-bottom:2px solid #000;
    display:table;
  }
  #wrapper .col {
    width:33%;
    display:table-cell;
  }
  #wrapper .col:nth-child(1) {
    border-right:2px solid #000;
 }
  #wrapper .col:nth-child(2) {
    border-right:2px solid #000;
  }
  #wrapper .col {
    padding:10px;
  }

HTML:

<div id="wrapper">
    <div class="col">
       1<br />
       1<br />
       1<br />
    </div>
    <div class="col">
       1<br />
       1<br />
       1<br />
       1<br />
       1<br />
       1<br />
       1<br />
       1<br />
    </div>
    <div class="col">
       1<br />
       1<br />
    </div>
</div>
14.03.2014
  • Святая корова. Это работает. Дайте мне минуту, чтобы проверить это лучше в моем проекте 14.03.2014
  • Не могу поверить, что я не подумал о table-cell. Спасибо тебе за это. 14.03.2014
  • Превосходно. Я пытался найти решение HTML/CSS, и хотя я бросил display: table-cell на него, я забыл поставить вокруг него display: table! Дох. 14.03.2014
  • О да. В идеале при использовании display:table вы должны следовать структуре фактической таблицы, поэтому следующей будет display:table-row и, наконец, display:table-cell. Но только table, за которым следует table-cell, хорошо работает, когда у вас есть только 1 строка. 14.03.2014

  • 2

    Дело в том, что с float: left; вы больше не можете использовать CSS, чтобы указать им высоту своего контейнера.

    Я ожидаю, что есть лучшее общее решение HTML/CSS (не стреляйте в меня, но это очень похоже на таблицу), но с этой разметкой вам, вероятно, лучше всего будет напрямую определять размеры элементов: Живой пример

    $(window).on('load resize', function(){
      var $div = $('#wrapper .col');
      var max = 0;
    
      // let them all size naturally
      $div.css('height', '');
    
      // now find the max
      $div.each(function(){
        var $this = $(this),
            height = $this.outerHeight();
        if (height > max) {
          max = height;
        }
      });
      // then apply it
      $div.each(function(){
        $(this).css('height', max);
      });
    }).resize();
    
    14.03.2014
  • Хорошо, спасибо за информацию о поплавках, я этого не знал. Это сэкономит мне немного волос в будущем. Сейчас попробую ваш пример. Спасибо. 14.03.2014
  • @Т.Дж. Краудер Ценю это. Но я хочу знать, почему метод css() не работает внутри функции поиска max 14.03.2014
  • TJ, спасибо! Это работает. Мне было все равно, как это выглядит. :) Если это работает, это все, что мне нужно. Вы знаете, действительно должно быть больше вариантов для 100% высоты. 14.03.2014
  • TJ, спасибо за вашу помощь. Я должен был принять ответ выше. Он придумал чистый метод CSS для этого. display:table-cell вот что это сделало. 14.03.2014
  • @NaN: я бы тоже принял это. Я пытался придумать один, но хотя я пытался table-cell, я забыл поставить вокруг него display: table! Дох! 14.03.2014
  • Нет, не чувствуй себя плохо. Я тоже корю себя за это. Вау, и так просто! 14.03.2014
  • Новые материалы

    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

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

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


    Для любых предложений по сайту: [email protected]