Сделать столбец A равным столбцу B по высоте

ProgramBox

Сделать столбец A равным столбцу B по высоте

Post author:admin
Запись опубликована:21 февраля, 2023
Post category:Вопросы по программированию

#twitter-bootstrap #css #multiple-columns

#twitter-bootstrap #css #несколько столбцов

Вопрос:

Я пытаюсь получить 2 столбца на веб-странице одинаковой высоты. Высота столбца не задана в advanced. Чего я хочу добиться, так это того, что столбец A всегда равен столбцу B. В случае, если в столбце A больше содержимого, он должен получить полосу прокрутки.

У меня есть 2 столбца в родительском контейнере, но либо столбец A меньше, либо столбец A растягивает родительский контейнер. Высота столбца A определяется столбцом B. В проекте используется bootstrap.

 <div class="parent col-md-12">
  <div class="colA col-md-3"></div>
  <div class="colB col-md-9"></div>
</div>

Желаемый результат:

если столбец A равен 50px, а B 100px, сделайте 100px
Если столбец A равен 100px, а B 100px, сделайте 100px (никаких изменений не требуется)
Если столбец A равен 150px, а B 100px, сделайте 100px

Ответ №1:

При незначительном изменении HTML это возможно с помощью Flexbox.

Columnb будет принимать высоту ColumnB, но содержимое ColumnA внутри абсолютно позиционированного div со 100% высотой (и переполнением).

 .parent {
  display: flex;
  margin-bottom: 1em;
}
.colA {
  position: relative;
  background: pink;
  flex: 1;
}
.colB {
  height: 75px;
  flex: 1;
  background: lightblue;
}
.inner {
  position: absolute;
  height: 100%;
  overflow: auto;
}
.tall .colB {
  height: 180px;
}

 <div class="parent">
  <div class="colA">
    <div class="inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusantium iure nostrum nemo eaque sunt impedit reiciendis expedita ducimus necessitatibus voluptas excepturi, deleniti aut repellat! Porro nihil nemo, ipsum ipsa reiciendis quis
        cupiditate fugiat quam!</p>
    </div>
  </div>
  <div class="colB"></div>
</div>

<div class="parent tall">
  <div class="colA">
    <div class="inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusantium iure nostrum nemo eaque sunt impedit reiciendis expedita ducimus necessitatibus voluptas excepturi, deleniti aut repellat! Porro nihil nemo, ipsum ipsa reiciendis quis
        cupiditate fugiat quam!</p>
    </div>
  </div>
  <div class="colB"></div>
</div>

1. провел небольшой тест, пока он кажется многообещающим.

2. это работает для проблемы высоты, к сожалению, это отменяет столбцы начальной загрузки на 2 столбца по 50%. я забыл упомянуть, что я использую столбцы начальной загрузки для ширины столбцов 3-9.

3. Вы все равно можете использовать столбцы начальной загрузки, просто удалите flex:1 его, чтобы он все еще работал. — codepen.io/Paulie-D/pen/jraEJN

4. я заставил это работать, с выравниванием столбцов начальной загрузки и т. Д. Так что спасибо за это, Теперь у меня есть только полоса прокрутки, которая сама перемещается в столбец over, но это не должно быть так сложно исправить. Спасибо за помощь.

Ответ №2:

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

 function resize(){
$('#col-2').height($('#col-1').height());
}

$(function(){
resize();
});

 *{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.column{
  width: 50%;
  float: left;
  padding: 1.25rem;
  overflow: scroll;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="column" id="col-1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vehicula, enim non sollicitudin molestie, dolor
        diam auctor turpis, eget venenatis ligula eros nec mi. Quisque bibendum erat a magna pretium finibus.
        Suspendisse vehicula lectus felis, quis pharetra purus commodo et. Praesent nec suscipit elit. Vivamus vitae mi
        libero. Curabitur malesuada blandit velit, eget venenatis nisi malesuada ut. Praesent sollicitudin lacus quis
        elit placerat, dapibus luctus purus facilisis. Integer eget congue libero, nec euismod mauris. Duis aliquet odio
        nulla, lacinia vulputate orci tincidunt quis. Quisque magna sapien, tincidunt a suscipit sed, imperdiet non
        tellus. Mauris sagittis neque sed suscipit molestie. Suspendisse ultricies sollicitudin tortor quis maximus.
        Suspendisse condimentum facilisis sagittis. Duis quis malesuada nisi, non euismod augue. Phasellus rutrum, nunc
        ac dictum facilisis, ipsum turpis suscipit metus, id sagittis eros mauris in mi. Fusce odio purus, dignissim id
        erat eu, pellentesque vehicula nisi.
    </div>
    <div class="column" id="col-2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vehicula, enim non sollicitudin molestie, dolor
        diam auctor turpis, eget venenatis ligula eros nec mi. Quisque bibendum erat a magna pretium finibus.
        Suspendisse vehicula lectus felis, quis pharetra purus commodo et. Praesent nec suscipit elit. Vivamus vitae mi
        libero. Curabitur malesuada blandit velit, eget venenatis nisi malesuada ut. Praesent sollicitudin lacus quis
        elit placerat, dapibus luctus purus facilisis. Integer eget congue libero, nec euismod mauris. Duis aliquet odio
        nulla, lacinia vulputate orci tincidunt quis. Quisque magna sapien, tincidunt a suscipit sed, imperdiet non
        tellus. Mauris sagittis neque sed suscipit molestie. Suspendisse ultricies sollicitudin tortor quis maximus.
        Suspendisse condimentum facilisis sagittis. Duis quis malesuada nisi, non euismod augue. Phasellus rutrum, nunc
        ac dictum facilisis, ipsum turpis suscipit metus, id sagittis eros mauris in mi. Fusce odio purus, dignissim id
        erat eu, pellentesque vehicula nisi.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vehicula, enim non sollicitudin molestie, dolor
        diam auctor turpis, eget venenatis ligula eros nec mi. Quisque bibendum erat a magna pretium finibus.
        Suspendisse vehicula lectus felis, quis pharetra purus commodo et. Praesent nec suscipit elit. Vivamus vitae mi
        libero. Curabitur malesuada blandit velit, eget venenatis nisi malesuada ut. Praesent sollicitudin lacus quis
        elit placerat, dapibus luctus purus facilisis. Integer eget congue libero, nec euismod mauris. Duis aliquet odio
        nulla, lacinia vulputate orci tincidunt quis. Quisque magna sapien, tincidunt a suscipit sed, imperdiet non
        tellus. Mauris sagittis neque sed suscipit molestie. Suspendisse ultricies sollicitudin tortor quis maximus.
        Suspendisse condimentum facilisis sagittis. Duis quis malesuada nisi, non euismod augue. Phasellus rutrum, nunc
        ac dictum facilisis, ipsum turpis suscipit metus, id sagittis eros mauris in mi. Fusce odio purus, dignissim id
        erat eu, pellentesque vehicula nisi.
    </div>
</div>

Ответ №3:

Вам нужно будет использовать JavaScript, поскольку высота не предопределена

 var colA = $('.col-a'),
    colB = $('.col-b'),
    AHeight = $('.col-a').height(),
    BHeight = $('.col-b').height();

if ( BHeight > AHeight ) {
  colA.height(BHeight);
} else {
  colA.height(BHeight).addClass('scroll');
}

 .parent {
  overflow: hidden; 
}
.parent [class^="col"] {
  float: left;
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
}
.parent [class^="col"]:nth-child(even) {
  background: #ccc;
}
.parent [class^="col"]:nth-child(odd) {
  background: #eee;
}

.scroll {
  overflow-y: scroll;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="col-a">
  <stong>Column A</stong>
    <p>
Lorem ipsum dolor sit amet, lacinia a scelerisque lectus ut, magna semper curabitur neque luctus et sodales, porttitor sollicitudin laoreet donec nam mattis, placerat fusce justo, in at tempor. In et, sem et ac in. Blandit aenean, pellentesque rutrum lacinia volutpat morbi mollis nulla. Interdum in neque duis vivamus, lacus non at, vel consectetuer vitae metus. Molestie vehicula vestibulum dui suscipit, arcu et aliquam ullamcorper.
</p>
  </div>
  <div class="col-b">
  <stong>Column B</stong>
    <p>
Lorem ipsum dolor sit amet, lacinia a scelerisque lectus ut, magna semper curabitur neque luctus et sodales, porttitor sollicitudin laoreet donec nam mattis.
</p>
  </div>
</div>

1. К сожалению, это приводит к тому, что более короткий растягивается, чтобы соответствовать самому длинному. Что мне нужно, так это то, что столбцу A присваивается тот же размер, что и столбцу B

Ответ №4:

Вы можете использовать «display: flex» для равной ширины / высоты столбцов.

Вот ссылка для полного описания «display: flex» :-

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

1. Как бы вы сделали столбец наименьшей высоты ведущим столбцом по высоте с помощью flex?

2. Извините, это моя вина, я оставил часть прокрутки. согласно вопросу, оба поля должны иметь одинаковую высоту во всех трех условиях. это условие выполняется с помощью «display: flex». а для прокрутки вам нужно использовать некоторые модификации jquery и html. html: — <div class=»parent»> <div class=»colA»><div class=»colA-in»></div></div> <div class=»colA-in»></div></div> </div> Вам нужно применить display flex к colA и ColB, и после этого вы используете colA-in и ColB-in для получения разной высоты содержимого. и вы можете добавить прокрутку в соответствии с этим.