将内容放入 div bootstrap 或 css

Question

我在另一个里面有两个 div。其中一个包含我需要贴在父 div 底部的按钮，另一个包含人员列表或文本，问题是如果文本很大，它会超出 div，我还不知道如何解决它。这是代码：

          <div class="white container shadow-box-5 fixed-bottom">
            <div class="fluid-container position-relative h-100">
              <div class="flex-wrapper h-100">
                <div class="pt-3">
                  <span>
                    Lorem ipsum dolor sit amet, consectetur adipisicing
                    elit. Exercitationem officia odit omnis maiores nesciunt
                    numquam voluptas quo perspiciatis quaerat aperiam
                    tempore excepturi pariatur ducimus, nihil, eveniet iure
                    culpa dicta minus! Lorem ipsum dolor sit amet,
                    consectetur adipisicing elit. Distinctio optio, pariatur
                    quaerat sunt quam magnam numquam. Quia reiciendis
                    delectus dignissimos totam cum ex repellendus aliquid
                    esse. Dignissimos doloremque suscipit ullam! Lorem ipsum
                    dolor sit amet consectetur adipisicing elit. Commodi
                    fugiat culpa iure quas, vero nesciunt quaerat
                    repellendus dolor dignissimos aspernatur odio harum,
                    sequi, quidem aliquam doloremque repellat quae veritatis
                    magnam.
                  </span>
                </div>
                <div class="position-absolute w-100 mb-4">
                  <button
                    @click="
                      $router.push({
                        name: 'ECommerce',
                        hash: '#productmonth',
                      })
                    "
                    type="button"
                    class="btn btn-primary btn-block"
                  >
                    Comparar
                  </button>
                </div>
              </div>
            </div>

这就是 div 现在的样子。

Answer 1

<div class="white container shadow-box-5 fixed-bottom">
            <div class="fluid-container position-relative h-100">
              <div class="flex-wrapper h-100">
                <div class="pt-3">
                    Lorem ipsum dolor sit amet, consectetur adipisicing
                    elit. Exercitationem officia odit omnis maiores nesciunt
                    numquam voluptas quo perspiciatis quaerat aperiam
                    tempore excepturi pariatur ducimus, nihil, eveniet iure
                    culpa dicta minus! Lorem ipsum dolor sit amet,
                    consectetur adipisicing elit. Distinctio optio, pariatur
                    quaerat sunt quam magnam numquam. Quia reiciendis
                    delectus dignissimos totam cum ex repellendus aliquid
                    esse. Dignissimos doloremque suscipit ullam! Lorem ipsum
                    dolor sit amet consectetur adipisicing elit. Commodi
                    fugiat culpa iure quas, vero nesciunt quaerat
                    repellendus dolor dignissimos aspernatur odio harum,
                    sequi, quidem aliquam doloremque repellat quae veritatis
                    magnam.
                </div>
                <div class="position-absolute w-100 mb-4">
                  <button
                    @click="
                      $router.push({
                        name: 'ECommerce',
                        hash: '#productmonth',
                      })
                    "
                    type="button"
                    class="btn btn-primary btn-block"
                  >
                    Comparar
                  </button>
                </div>
              </div>
            </div>

试试这个！

我需要 css 来帮助你更多。

Answer 2

您似乎正在使用 Tailwind。这就是你需要的。您也可以在Tailwind Play 中试用。

<section class="bg-red-50 border-red-100 border-8 h-screen p-6">
  <div class="flex flex-col flex-nowrap gap-y-4 h-full">
    <div class="flex-grow overflow-y-auto">
      <p>Friday night. I hate the Wetlands. They're stupid and wet, and there are bugs everywhere, and I think I maced a crane.</p>
      <p class="mt-4">But I did finally get into Dad's pants. Although I had to have the crotch taken in a little bit. Heyyyyy, hermano. I don't appreciate the dry British humor. I never thought I'd miss a hand so much! Get rid of the Seaward.</p>
      <p class="mt-4">Lucille: I'll leave when I'm good and ready. I don't criticize you! And if you're worried about criticism, sometimes a diet is the best defense.</p>
    </div>

    <div class="flex-none">
      <button class="bg-red-500 p-3 rounded text-white w-full">Comparar</button>
    </div>
  </div>
</section>

Answer 3

最后我需要做的是向包含跨度的 div 添加一个溢出自动。这比我想象的要简单。

      <div class="white container shadow-box-6 fixed-bottom white-card">
        <div class="fluid-container position-relative h-100">
          <div class="flex-wrapper h-100 pt-4">
            <div class="overflow-auto px-2" style="height: 80%">
              <div
                v-for="(persona, index) in ranking"
                :key="'persona' + index"
                class="persona-container"
              >
                <div v-if="index >= 1">
                  <div
                    class="
                      d-flex
                      align-items-center
                      justify-content-between
                      px-2
                      my-3
                      person-box
                    "
                    :class="
                      persona.id_sharp == user_idSharp
                        ? 'person-back2'
                        : 'person-back1'
                    "
                    :id="
                      persona.id_sharp == user_idSharp ? 'active' : 'inactive'
                    "
                  >
                    <div class="col-1 text-center">
                      <p class="font-Roboto fs-16 my-auto text-gray-400">
                        {{ index + 1 }}
                      </p>
                    </div>
                    <div class="col-2 pl-2">
                      <div v-if="persona.prof_picture == null">
                        <img
                          src="@/assets/img/questionmark.png"
                          alt=""
                          class="avatar-3 rounded-circle shadow-box"
                        />
                      </div>
                      <div v-else>
                        <img
                          :src="
                            'https://api-dev.embajadores.com.co/' +
                            persona.prof_picture
                          "
                          alt=""
                          class="avatar-3 rounded-circle shadow-box"
                        />
                      </div>
                    </div>
                    <div class="col overflow-hidden p-3">
                      <div class="">
                        <p
                          class="
                            font-RobotoBold
                            fs-14
                            text-capitalize text-truncate
                            my-1
                          "
                        >
                          {{ persona.site.name.toLowerCase() }}
                        </p>
                        <p
                          class="
                            font-Roboto
                            fs-14
                            text-capitalize text-truncate
                            my-1
                          "
                          :class="
                            persona.id_sharp == user_idSharp
                              ? 'text-gray-400'
                              : 'text-gray-300'
                          "
                        >
                          {{ persona.name.toLowerCase() }}
                        </p>
                      </div>
                    </div>
                    <div class="col-2">
                      <div
                        class="shadow-box-2 bor-rounded-xs text-center"
                        style="width: 38px; height: 38px"
                      >
                        <p
                          class="font-RobotoBold fs-16"
                          style="line-height: 38px"
                        >
                          {{
                            Math.round(
                              parseFloat(
                                persona.average
                                  .substring(0, 5)
                                  .replace(",", ".")
                              )
                            )
                          }}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="tag-3 image-container-2 text-center"
              @click="scroll('active')"
            >
              <!-- <p
                class="
                  fs-16
                  font-RobotoBold
                  rounded-circle
                  bg-orange-450
                  h-100
                  line-height-30
                  mx-auto
                  text-white-100
                "
              >
                1
              </p> -->
              <i
                class="
                  icon-flecha-abajo
                  text-white-100
                  bg-orange-450
                  rounded-circle
                  fs-30
                "
              ></i>
            </div>
            <div class="position-absolute w-100 mb-4">
              <button
                @click="
                  $router.push({
                    name: 'CompareLeaders',
                  })
                "
                type="button"
                class="btn btn-primary btn-block"
              >
                Comparar
              </button>
            </div>
          </div>
        </div>
      </div>