添加卡片时，部分内容超出页面答案

【问题标题】：Section content goes out of page on adding cards添加卡片时，部分内容超出页面
【发布时间】：2021-04-03 17:28:27
【问题描述】：

我尝试以卡片的形式显示信息。每张卡片都在有序列表 li 内。在以 li 形式添加更多卡片时，内容会从顶部超出页面。如何设置高度根据卡片数量自动调整。

HTML代码

<body>
    <section>
        <div class="leftBox">
            <div class="content">
                <h1>Events</h1>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae quia atque cupiditate commodi
                    nihil
                    cum? Autem rem voluptates aperiam. Est non dolor, unde quam laborum eveniet quidem doloribus
                    iure
                    ad!
                </p>
            </div>
        </div>
        <div class="events">
            <ul>
                <li>
                    <div class="time">
                        <h2>2<br><span>April</span></h2>
                    </div>
                    <div class="details">
                        <h3>Celestial</h3>
                        <p>
                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere
                            deleniti corporis deserunt doloribus maxime.
                        </p>
                        <a href="#">View Details</a>
                    </div>
                    <div style="clear: both;"></div>
                </li>
                <li>
                    <div class="time">
                        <h2>2<br><span>April</span></h2>
                    </div>
                    <div class="details">
                        <h3>Celestial</h3>
                        <p>
                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere
                            deleniti corporis deserunt doloribus maxime.
                        </p>
                        <a href="#">View Details</a>
                    </div>
                    <div style="clear: both;"></div>
                </li>
            </ul>
        </div>
    </section>

</body>

对应的CSS

body{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
section{
    width: 100%;
    height: 100vh;
    background: #323a45;
    background-size: cover;
}
``

【问题讨论】：

标签： html css height viewport

【解决方案1】：

你能检查一下下面的代码吗？希望它对你有用。我们使用了 display flex 属性来创建卡片元素，您似乎使用了浮动元素，因为浮动会产生高度对齐问题。我们为您提供了两种对齐结构，因此您可以根据自己的方便使用任何一种。

请参考此链接：https://jsfiddle.net/yudizsolutions/1vLqr6uo/2/

body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

section {
  width: 100%;
  height: 100vh;
  /* background: #323a45;*/
  background-size: cover;
}

ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

ul li {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.events.copy ul li {
  display: block;
}

<body>
  <section>
    <div class="leftBox">
      <div class="content">
        <h1>Events</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae quia atque cupiditate commodi nihil cum? Autem rem voluptates aperiam. Est non dolor, unde quam laborum eveniet quidem doloribus iure ad!
        </p>
      </div>
    </div>
    <div class="events">
      <ul>
        <li>
          <div>
            <div class="time">
              <h2>2<br><span>April</span></h2>
            </div>
            <div class="details">
              <h3>Celestial</h3>
              <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
              </p>

            </div>
          </div>
          <a href="#">View Details</a>

        </li>
        <li>
          <div>
            <div class="time">
              <h2>2<br><span>April</span></h2>
            </div>
            <div class="details">
              <h3>Celestial</h3>
              <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
              </p>

            </div>
          </div>
          <a href="#">View Details</a>

        </li>
        <li>
          <div>
            <div class="time">
              <h2>2<br><span>April</span></h2>
            </div>
            <div class="details">
              <h3>Celestial</h3>
              <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus
                maxime.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
              </p>

            </div>
          </div>
          <a href="#">View Details</a>
        </li>
      </ul>
    </div>
    <div class="events copy">
      <ul>
        <li>
          <div>
            <div class="time">
              <h2>2<br><span>April</span></h2>
            </div>
            <div class="details">
              <h3>Celestial</h3>
              <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
              </p>

            </div>
          </div>
          <a href="#">View Details</a>

        </li>
        <li>
          <div>
            <div class="time">
              <h2>2<br><span>April</span></h2>
            </div>
            <div class="details">
              <h3>Celestial</h3>
              <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
              </p>

            </div>
          </div>
          <a href="#">View Details</a>

        </li>
        <li>
          <div>
            <div class="time">
              <h2>2<br><span>April</span></h2>
            </div>
            <div class="details">
              <h3>Celestial</h3>
              <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus
                maxime.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
              </p>

            </div>
          </div>
          <a href="#">View Details</a>
        </li>
      </ul>
    </div>
  </section>

</body>

【讨论】：