【发布时间】：2018-12-21 03:26:49
【问题描述】：
我有一个网站，其中包含一个在段落之间转换的滑块。
如何调整滑块的高度，使其动态变化，具体取决于相应段落中的内容量。
到目前为止，无论段落中有多少内容，我的滑块仍然会将所有内容向下推，无论高度如何。
提前感谢您的帮助。
<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;
}
}
}
}
}
}
【问题讨论】：
-
no matter how much content is within a paragraph, my slider still pushes everything down , regardless of height不太清楚你的意思。我正在查看您的 codepen，看起来内容始终包含在其中 -
感谢您的浏览。很难解释，但我会努力做得更好。在代码笔上，有项目符号（跟踪滑块）和图像。请注意它们如何不在滑块的正下方。他们留在底部。如何根据内容上下移动内容？我希望这更有意义。
-
不，不幸的是，这没有任何意义。
-
一切都好，只是为了澄清，请注意底部的图像（儿童图像）在容器缩小时（调用不同幻灯片时）不会向上移动。它留在同一个地方。我的滑块占用了不必要的空间。我想调整与其中内容匹配的滑块的高度。很抱歉无法更好地解释
-
您的元素
#slider-wrapper和.slider-items都有height: 100vh。这意味着“浏览器窗口高度的 100%”。不幸的是，您的整个布局似乎都依赖于这两行 CSS，所以我认为这不是一个简单的解决方法。
标签： javascript jquery html css sass