用溢出调整 div 的高度

Question

请帮我用 CSS 来获得一种特殊的视觉效果。我有一个容器 div，里面包含 3 个 div。
First DIV是隐藏的；
Second DIV是上下滑动First DIV的按钮；
Third DIV 是一个具有溢出属性的 div，可以滚动里面的信息。

当 DIV-1 向下滚动时，我不知道如何更改/调整 DIV-3 的高度 - 以将 DIV-3 保持在 Div CONTAINER 内。我希望其他人以前遇到过这样的问题，并且可以推荐一些有用的东西。

请查看我的JSFIDDLE 以查看真实示例。感谢您的宝贵时间！

---

示例

---

<div class="container">
    <div class="updiv">Header info</div>
<div class="middle" onclick="uparrow()">button UP and DOWN</div>
    <div class="bottomdiv">
        <div class="block">111</div>
        <div class="block">222</div>
       <div class="block">333</div>  
      <div class="block">444</div> 
    </div>
</div>

---

CSS

---

.container{
  width:400px;
  height:400px;
  border:1px solid red;
  position: relative; 


}
.updiv{
 display:none;
 width:392px;
 height:100px;
  margin:3px;
 border:1px solid blue;
 background:yellow;   
}
.middle{
margin:3px;
 width:392px;
 height:30px;
 background:green;
 color:white;
 text-align:center;   
}
.block{
 width:100%;
 height:100px;   
 background:pink;
 margin-bottom:20px;   
}
.bottomdiv{
overflow-y: scroll; 
margin:3px;
width:392px;
height:350px;
display:block;
border:1px solid blue;        
}

---

脚本

---

 function uparrow(){
 $('.updiv').slideToggle();
 }

Answer 1

你给父容器一个固定的高度400px，这意味着问题是你无论如何都强迫它有这个高度，just remove it。