Question

请帮我用CSS获取一个特殊的视觉效果。我有一个容器div，其中包含3个div。
第一个DIV 被隐藏;
第二个DIV 是一个向上和向下滑动第一个DIV的按钮;
第三个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;        
}

SCRIPT

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

Answer 1

您为父容器指定了400px的固定高度，这意味着问题是您无论如何强迫它拥有该高度just remove it。

用溢出调整div的高度

1 个答案: