[英]How to auto adjust container height according to content .
我有一個網站，其中包含一個在段落之間轉換的滑塊。
如何調整滑塊的高度，使其動態變化，具體取決於相應段落中的內容量。
到目前為止，無論段落中有多少內容，我的滑塊仍會將所有內容向下推，無論高度如何。
預先感謝您的幫助。
<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;
}
}
}
}
}
}
我覺得我好笨。 我要做的就是在不活動時更改display:none在活動時將其更改為display:block 。
如何根據手風琴滑塊中的內容調整嵌套div的高度？
[英]How to adjust height of nested div according to its content in accordion slider?
如何使用CSS / Javascript根據窗口高度使div在兩個div之間自動調整其高度？
[英]How can I make a div auto-adjust its height between two divs, according to window height using CSS/Javascript?
根據內容高度自動更改箭頭的高度（液體滑塊）
[英]Auto change the height of arrow according to content height (Liquid slider)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.