我正在创建一个时间表，其中包含从周一到周日的一系列天数内的特定事件。这是示例:
所有这些看起来都很棒，除了你去“星期六”的时候，因为有更多的内容，所以需要另一行。背景没有随附加内容缩放，所以现在它被推到另一个部分。我想要的是在转到“星期六”链接时背景随其他页面缩放。因此，与“星期二”部分相比，我为“程序计划-时间表”添加了额外的几个部分
当前代码为:
<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;
例如，当我将 padding 更改为 20em 时，它适合所有内容。但在其他只有 1 行的日子里，它太大了。
我试过将“星期六”部分放在它自己的容器中，将主容器的代码复制到“星期六”的单独部分中，创建它自己的“div id”。或诸如此类的事情:
<div class="schedule-content-saturday" data-day="saturday">
#fh5co-schedule-section-saturday {
padding: 20em 0;
}
但以上似乎都不起作用。可能是因为整个部分都被填充了，而我正在尝试为星期六填充特定的容器，因为我不希望整个部分缩放，只是为了星期六按钮。
我是否需要将每一天都转换为它自己的单独容器，或者我是否可以通过背景缩放子容器？谢谢。
您可以在这里下载站点文件:
最佳答案
我会去:
去掉容器上的px高度，设为height: auto;我猜它是由JS设置的？删除该代码。
.schedule-container { 高度:自动；
然后让行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; }
关于html - 子内容不随背景 CSS 缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51231491/