resize height of div with overflow

Question

Please help me with CSS to obtain one special visual effect. I have a container div which contains 3 divs inside.
First DIV is hidden;
Second DIV is a button which Slide Up and Down the First DIV;
Third DIV is a div with Overflow properties which scroll the information inside.

I do not know how to change/adjust the height of DIV-3 when DIV-1 is scrolling down - to keep DIV-3 inside of Div CONTAINER. I hope someone else faced such problem before and can recommend something useful.

Please have a look in my JSFIDDLE in order to see the real example. Thank you for your time!

EXAMPLE

<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();
 }

Ali Bassam · Accepted Answer · 2014-03-10 22:39:46Z

1

You gave the parent container a fixed height of 400px, means the problem is that you're forcing it to have that height no matter what, just remove it.

answered Mar 10, 2014 at 22:39

Ali Bassam

10k24 gold badges71 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sergiu Costas Over a year ago

this is a issue that Container must not change the size. it should be a fix size...

Ali Bassam Over a year ago

@SergiuCostas so when the first div is expanded, and the 3rd div goes down, a part of it should be hidden?

Sergiu Costas Over a year ago

No, the height of DIV-3 must change to suit the Container

Sergiu Costas Over a year ago

indeed it can be a solution to add to container CSS overflow:hidden; - but I hope it exists better solution :)

Collectives™ on Stack Overflow

resize height of div with overflow

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related