我正在创建一个时间表，其中包含从周一至周日的几天内的特定活动。这是示例：
除了您进入“星期六”时，其他所有内容看起来都很不错，因为内容更多，因此需要另外一行。背景并没有随其他内容缩放，因此现在将其推到其他部分。我想要的是背景在转到“星期六”链接时可与其他页面一起缩放。因此，与“星期二”部分相比，我为“程序计划表”添加了其他几个部分
当前代码为：
<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>
CSS：
#fh5co-programs-section,
#fh5co-schedule-section,
#fh5co-team-section,
#fh5co-blog-section,
#fh5co-contact {
padding: 7em 0;
background-color: grey;
}
@media screen and (max-width: 768px) {
#fh5co-programs-section,
#fh5co-schedule-section,
#fh5co-team-section,
#fh5co-blog-section,
#fh5co-contact {
padding: 4em 0;
}
}
.schedule {
padding: 0;
margin: 0 0 40px 0;
}
.schedule li {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
font-size: 16px;
}
.schedule li a {
color: rgba(0, 0, 0, 0.5);
padding: 5px 20px;
cursor: pointer;
}
.schedule li a:active, .schedule li a:focus {
text-decoration: none;
}
.schedule li a.active {
background: #4CB648;
color: #fff !important;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
border-radius: 30px;
}
@media screen and (max-width: 768px) {
.schedule li {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
margin-bottom: 10px;
font-size: 18px;
}
}
.schedule-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
visibility: hidden;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.schedule-content.active {
opacity: 1;
visibility: visible;
}
我这个年龄段的人都没有运气。这是我下载的模板。我发现导致主要背景尺寸的部分是：
#fh5co-schedule-section,
padding: 7em 0;
background-color: grey;
例如，当我将填充更改为20em时，则适合所有内容。但是后来只有1行的那一天太大了。
我尝试将“ saturday”部分放入其自己的容器中，将主容器的代码复制到“ saturday”的单独部分中，创建其自己的“ div id”。或诸如此类的东西：
<div class="schedule-content-saturday" data-day="saturday">
#fh5co-schedule-section-saturday {
padding: 20em 0;
}
但是以上方法似乎都不起作用。也许是因为整个部分都被填充了，而我却试图在星期六填充特定的容器，因为我不希望整个部分仅按“星期六”按钮进行缩放。
我是否需要每天将其转换为自己的单独容器，或者我有没有办法用背景缩放子容器？谢谢。
您可以在此处下载站点文件：
答案 0 :(得分：0)
我会去
删除容器上以px为单位的高度，将其设置为height：自动；我猜它是由JS设置的？删除该代码。
.schedule-container { 高度：自动； }
然后使css行
Integer[]