Html 子内容是'；使用背景CSS进行t缩放

我正在创建一个时间表，其中包含从周一到周日的一系列天数内的具体活动。下面是一个例子：

除了你去看《星期六》的时候，它们看起来都很棒，因为内容更多，所以需要另一行。背景没有随着附加内容进行缩放，所以现在它被推到了另一个部分。我想要的是，当转到“星期六”链接时，背景可以与其他页面一起缩放。因此，与“星期二”部分相比，我为“计划时间表”增加了几个部分

目前的代码是：

    <div id="fh5co-schedule-section" class="fh5co-lightgray-section">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="heading-section text-center animate-box">
                        <h2>Class Timetable</h2>
                        <p>The Fitness Centre is always open during class times.</p>
                    </div>
                </div>
            </div>
            <div class="row animate-box">
                <div class="col-md-10 col-md-offset-1 text-center">
                    <ul class="schedule">
                        <li><a href="#" class="active" data-sched="tuesday">Tuesday</a></li>
                        <li><a href="#" data-sched="saturday">Saturday</a></li>
                    </ul>
                </div>
                <div class="row text-center">

                    <div class="col-md-12 schedule-container">



                        <div class="schedule-content active" data-day="tuesday">
                            <div class="col-md-3 col-sm-6">
                                <div class="program program-schedule">
                                    <img src="images/fit-dumbell.svg" alt="Cycling">
                                    <small>4:30PM - 5:30PM</small>
                                    <h3>Kidzone Kickboxing</h3>
                                    <span>John Doe</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="program program-schedule">
                                    <img src="images/fit-yoga.svg" alt="">
                                    <small>5PM - 6PM</small>
                                    <h3>Capoeira<br>(Brazilian Martial Art)</h3>
                                    <span>James Smith</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="program program-schedule">
                                    <img src="images/fit-cycling.svg" alt="">
                                    <small>6PM - 7PM</small>
                                    <h3>Adult Kick Boxing</h3>
                                    <span>Rita Doe</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="program program-schedule">
                                    <img src="images/fit-boxing.svg" alt="Cycling">
                                    <small>8PM - 9PM</small>
                                    <h3>Boxing Workout</h3>
                                    <span>John Dose</span>
                                </div>
                            </div>

                        </div>
                        <!-- END sched-content -->



                        <div class="schedule-content" data-day="saturday">
                            <div class="col-md-3 col-sm-6">
                                <div class="program program-schedule">
                                    <img src="images/fit-dumbell.svg" alt="Cycling">
                                    <small>8AM - 9:15AM</small>
                                    <h3>Enshin Karate</h3>
                                    <span>John Doe</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="program program-schedule">
                                    <img src="images/fit-yoga.svg" alt="">
                                    <small>9:15AM - 10:45AM</small>
                                    <h3>Traditional Jiu jitsu</h3>
                                    <span>James Smith</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="program program-schedule">
                                    <img src="images/fit-cycling.svg" alt="">
                                    <small>10:45AM - 11:45AM</small>
                                    <h3>Kidzone Boxing</h3>
                                    <span>Rita Doe</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="program program-schedule">
                                    <img src="images/fit-boxing.svg" alt="Cycling">
                                    <small>12PM - 1PM</small>
                                    <h3>Kidzone kickboxing (beginners)</h3>
                                    <span>John Dose</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="program program-schedule">
                                    <img src="images/fit-boxing.svg" alt="Cycling">
                                    <small>1PM - 2PM</small>
                                    <h3>Intermediate kickboxing</h3>
                                    <span>John Dose</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="program program-schedule">
                                    <img src="images/fit-boxing.svg" alt="Cycling">
                                    <small>2:15PM - 3:15PM</small>
                                    <h3>Kidzone Mixed Martial Arts<br>(5-12 years)</h3>
                                    <span>John Dose</span>
                                </div>
                            </div>
                        </div>
                        <!-- END sched-content -->


                    </div>


                </div>
            </div>
        </div>
    </div>

我已经玩了这么多年了，运气不好。这是我下载的一个模板。我发现导致主要背景大小的部分是：

#fh5co-schedule-section,
  padding: 7em 0;
  background-color: grey;

例如，当我将填充改为20em时，它适合所有内容。但在其他只有一条线的日子里，它太大了

我尝试将“saturday”部分放在它自己的容器中，将主容器的代码复制到“saturday”的单独部分中，创建它自己的“div id”。或类似的事情：

<div class="schedule-content-saturday" data-day="saturday">

#fh5co-schedule-section-saturday {
  padding: 20em 0;
}

#fh5co计划组星期六{
填充：20em0；
}

但以上这些似乎都不起作用。可能是因为整个区域作为一个整体是填充的，而我正试图填充周六的特定容器，因为我不希望整个区域缩放，只是为了周六按钮

我是否需要将每天转换为它自己的单独容器，或者是否有一种方法可以根据背景缩放子容器？谢谢

您可以在此处下载站点文件：

我会选择：

• 移除容器上以px为单位的高度，使其高度：自动；我猜它是由JS设置的？删除该代码
  .调度集装箱{ 高度：自动； }

• 然后将行设置为css

  .schedule-content {
      position: relative;
      display: block;
      opacity: 0;
      height: 0;
      overflow: hidden;
      visibility: hidden;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
  }
  .schedule-content.active {
      opacity: 1;
      height: auto;
      visibility: visible;
      overflow: visible;
  }
  

---

你应该找到一个替代绝对位置的方法，这个问题就像一个魅力！非常感谢：）

.schedule-content {
    position: relative;
    display: block;
    opacity: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.schedule-content.active {
    opacity: 1;
    height: auto;
    visibility: visible;
    overflow: visible;
}