Заставить div переполнить вместо изменения размера - PullRequest
Новая
       0

Заставить div переполнить вместо изменения размера

0 голосов
/ 29 марта 2020

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

Two column with diffenrent height

Если текст недостаточно длинный, то два столбцы по-прежнему имеют одинаковую высоту. Но в противном случае <div> автоматически изменяет размеры самих, заставляя их иметь другую высоту.

Я пытался использовать overflow-auto, но он не работает.

Вот скрипка моей работы. https://jsfiddle.net/kcaxy5Lh/1/

1 Ответ

1 голос
/ 30 марта 2020

То, как bootstrap устанавливает высоту, странно, у них flex-wrap:wrap в классе .row, что предотвращает переполнение.

Нам нужно удалить это и изменить макет на flex-direction:column, затем распространять высоту вниз. 

.info-tab {
  color: #BBB;
}

.comment {
  text-align: right;
}

.btn:focus {
  outline: none;
}


/* Comment section */

.comment-wrapper .media-list .media {
  border-bottom: 1px dashed #efefef;
  margin-bottom: 25px;
}

.user_name {
  font-size: 14px;
  font-weight: bold;
}

.comments-list .media {
  border-bottom: 1px dotted #ccc;
}

.title {
  font-size: 14px;
  font-weight: bold;
}

.komen {
  font-size: 14px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* NEW */

#myTabContent,
#profile {
  height: 100%;
}

#profile>div {
  flex-wrap: nowrap;
  flex-direction: column;
  height: 100%;
}

#infoTab>div {
  overflow: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<body class="bg-dark">
  <div class="container-fluid bg-dark">

    <div class="row px-3">
      <div class="col-xs-12 col-md-8 mt-5 embed-responsive embed-responsive-16by9 h-100" id="player">
        <iframe src="https://www.youtube.com/embed/2lAe1cqCOXo&t" width="640" height="480"></iframe>
      </div>
      <div class="col-xs-6 col-md-4 mt-5" id="infoTab">
        <div class="h-100 ml-2" style="border: 1px solid #555;">
          <div class="mx-3 h-100">
            <!-- Navication episode/comments -->
            <ul class="nav nav-tabs nav-fill py-3" id="myTab" role="tablist">
              <li class="nav-item text-right mx-2">
                <a class="info-tab btn comment" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="comment" aria-selected="false">Comments</a>
              </li>
            </ul>
            <br>
            <!-- Navication Content -->
            <div class="tab-content mx-1 container overflow-auto" id="myTabContent">
              <div class="tab-pane fade show active text-white f-right overflow-auto container" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                <!-- COMMENTs | https://bootsnipp.com/snippets/M5obX -->
                <div class="row py-1 overflow-auto">

                  <div class="col media p-0">
                    <div class="form-inline roundBorder mr-3">
                      <i class="form-inline fa fa-user" aria-hidden="true" style="color: #AAA;"></i>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading title text-primary">Fahmi Arif</h4>
                      <p class="komen">
                        kalo bisa ya ndak usah gan biar cepetasdiojahdakssak<br> abc
                        <br>
                      </p>
                    </div>
                  </div>

                  <div class="w-100"></div>

                  <div class="col media p-0">
                    <div class="form-inline roundBorder mr-3">
                      <i class="form-inline fa fa-user" aria-hidden="true" style="color: #AAA;"></i>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading title text-primary">Fahmi Arif</h4>
                      <p class="komen">
                        kalo bisa ya ndak usah gan biar cepetasdiojahdakssak<br> abc
                        <br>
                      </p>
                    </div>
                  </div>

                  <div class="w-100"></div>

                  <div class="col media p-0">
                    <div class="form-inline roundBorder mr-3">
                      <i class="form-inline fa fa-user" aria-hidden="true" style="color: #AAA;"></i>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading title text-primary">Fahmi Arif</h4>
                      <p class="komen">
                        kalo bisa ya ndak usah gan biar cepetasdiojahdakssak<br> abc
                        <br>
                      </p>
                    </div>
                  </div>

                  <div class="w-100"></div>

                  <div class="col media p-0">
                    <div class="form-inline roundBorder mr-3">
                      <i class="form-inline fa fa-user" aria-hidden="true" style="color: #AAA;"></i>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading title text-primary">Fahmi Arif</h4>
                      <p class="komen">
                        kalo bisa ya ndak usah gan biar cepetasdiojahdakssak<br> abc
                        <br>
                      </p>
                    </div>
                  </div>

                  <div class="w-100"></div>

                  <div class="col media p-0">
                    <div class="form-inline roundBorder mr-3">
                      <i class="form-inline fa fa-user" aria-hidden="true" style="color: #AAA;"></i>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading title text-primary">Fahmi Arif</h4>
                      <p class="komen">
                        kalo bisa ya ndak usah gan biar cepetasdiojahdakssak<br> abc
                        <br>
                      </p>
                    </div>
                  </div>

                  <div class="w-100"></div>

                </div>
                <!-- END COMMENT -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...