我有一个网站，其中包含一个在段落之间转换的滑块。
如何调整滑块的高度，使其动态变化，具体取决于相应段落中的内容量。
到目前为止，无论段落中有多少内容，我的滑块仍会将所有内容向下推，无论高度如何。
预先感谢您的帮助。
<div class = "main_body">
<div class = "grid-x align-centered">
<div class = "cell large-12 main_content">
<div id="slider-wrapper">
<!-- slider controls -->
<div class="slider-controlls">
<button class="next">></button>
<button class="prev"><</button>
</div>
<!-- slider items -->
<div class="slider-items">
<div class = "slider-item">
<div class="content">
<div class = "title">
<h3>Our Mission</h3>
</div>
<p>
Our Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamlearn best in
while pLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam and
responsive. Children aLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamolvers.
Children conLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamay. <br /> We will work with the
child's natural inclination to explore and solve problems. We believe this
motivates learning for success in your child's school readiness and future.
</p>
</div>
</div>
<div class="slider-item ">
<div class="content">
<div class = "title">
<h3>Our Curriculum</h3>
</div>
<p>
Our center follows the Creative Curriculum. This curriculum is designed to
challenge our children, build their self confidence and, most importantly,
develop aLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamum encourages
learning through arts, language, music, and socialization. <br /><br />We believe in
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamnean nulla quamild
development from early infancy through preschool years, focuses on
teacher-directed and child-initiated learning. <br /><br />The curriculum is goal-directed,
based on ongoing assessments for each child’s strengths and interests. With this
iLorem ipsLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quammotional
development is supporteLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamrmed of the
goals in the classroom and of how learning can be reinforced at home.
</p>
</div></div>
<div class="slider-item ">
<div class="content">
<div class = "title">
<h3>Our Philosophy</h3>
</div>
<p>We believe that each child is unique in
his/her own development and has the right to
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
a wholesome environment that will provide
early training in the life of a child and
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamnd
the Staff dedicate their time and efforts
toward the following goals: </p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
nuLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quams. </li> <li>
ELorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamopmentally
aLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
experimentation.
</li> <li> Fostering positive attitudes
towards life and school which lay aLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamfoundation for experience in future
years.
</li> <li> Encouraging the development
of a positive self-image.
</li> <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
working parents. </li> <li> Encouraging
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
school, home, and in the community.
</li> <li> Promoting an educational
environment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam. </li>
<li> The parent, and staff will bond
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
education of their child. </li>
</ul>
</div>
</div>
<div class="slider-bullets">
<span class="bullet"></span>
<span class="bullet"></span>
<span class="bullet"></span>
</div> <!-- slider bullets -->
</div>
</div>
</div>
<div class = 'cell large-12'>
<img height = "300" width = "500" src = "http://s470961525.onlinehome.us/wp-content/uploads/2013/06/walking.png"/>
</div>
</div></div>
Css
.main_body{
background-image: url('https://www.thevinelearningcenter1.com/wp-content/uploads/2015/09/background.jpg');
//background-image: url('http://www.powerpointhintergrund.com/download/children-powerpoint-template-to-educate-your-children-mutimedia--5616');
background-size:cover;
background-repeat: no-repeat;
background-position: top;
width:100%;
max-width:100%;
}
#slider-wrapper {
width: 100%;
height:100vh;
position: relative;
}
.slider-controlls {
.next, .prev{
display: block;
position: absolute;
border: none;
background-color: hsla(200, 100%, 80%, 0.2);
border-radius:10px;
cursor:pointer;
color: black;
top:50%;
padding:15px;
transform: translateY(-50%);
font-size: 18px;
z-index: 99999;
}
.next{
right:70px;
}
.prev{
left:70px;
}
}
.slider-items {
height: 100vh;
position: relative;
overflow:hidden;
.slider-item{
width:100%;
position: absolute;
opacity: 1;
&.active{
opacity:1;
.content{
.title h3{
opacity:1;
z-index: 9999;
font-weight: normal;
font-family: 'Gaegu', cursive;
font-weight:700;
background-color: hsla(200, 100%, 80%, 0.5);;
padding: 25px 0;
letter-spacing: 15px;
color:green;
}
p{
letter-spacing: 3px;
line-height:2em;
text-align: left;
font-family: 'Gaegu', cursive;
opacity: 1;
left: 20%;
z-index: 9999;
font-weight:500;
padding-left:100px;
padding-right:100px;
width:80%;
}
ul{
font-family: 'Gaegu', cursive;
margin-top:-5%;
opacity:1;
letter-spacing: 2px;
text-align: left;
line-height:2em;
font-size: 18px;
z-index: 9999;
padding-left:100px;
padding-right:100px;
width:80%;
}
img{
opacity:1;
}
}
}
.content{
width:100%;
position: relative;
.title h3{
text-align: center;
opacity:0;
transition: all 0.5s;
}
p{
padding: 5% 0 50px 50px;
margin:0 auto;
opacity:0;
transition: all 0.6s;
transition-delay: 0.1s;
background-color: hsla(200, 100%, 90%, 0.8);
width:85%;
font-family: 'Gaegu', cursive;
}
ul{
font-family: 'Gaegu', cursive;
padding: 5% 0 50px 50px;;
margin:0 auto;
opacity:0;
transition:all .10s;
background-color: hsla(200, 100%, 90%, 0.8);
width:85%;
transition-delay:.6s;
margin-top:-3%;
}
}
}
}
.slider-bullets {
width:100px;
bottom:20px;
position:absolute;
margin-top:10px;
text-align: center;
z-index: 99999;
width:100%;
.bullet{
width: 20px;
height: 20px;
background: rgba(#e4e4e4, 1);
border: 2px solid transparent;
border-radius: 50%;
display: inline-block;
cursor: pointer;
transition: all 0.3s;
&.active{
border: 2px solid #333;
}
}
}
@media screen and (max-width:1300px){
.slider-items{
.slider-item{
width:100%;
position: absolute;
opacity: 1;
&.active{
opacity:1;
.content{
.title h3{
opacity:1;
z-index: 9999;
font-weight: normal;
font-family: 'Gaegu', cursive;
font-weight:700;
background-color: hsla(200, 100%, 80%, 0.5);;
padding: 25px 0;
letter-spacing: 15px;
color:green;
}
p{
font-size:18px;
letter-spacing: 2px;
line-height:1.7em;
text-align: left;
font-family: 'Gaegu', cursive;
opacity: 1;
left: 20%;
z-index: 9999;
padding-left:50px;
padding-right:50px;
width:80%;
}
ul{
font-size:14px;
line-height:2em;
padding-left:50px;
padding-right:50px;
}
}
}
}
}
}
答案 0 :(得分：0)
我觉得很愚蠢。我要做的就是在不活动时更改display:none，然后在活动时将其更改为display:block。