0

I know I can give a {max-height} and {overflow: auto}. But I want the max-height to be dynamic and not fixed.

Lets say that we have 2 divs on a page, if div#1 is hidden the max-height of div#2 should increase so that it occupies the maximum area before scrolling, and scrolls only when it goes out of the viewport.

Sample jsbin: http://jsbin.com/voworuveqe/edit?html,css,js,output

Edit

Please CSS solutions only. No JS. Thank you!

Ankeet Maini
  • 732
  • 6
  • 8

2 Answers2

1

you should use a method like this one:

function('click',{

if(hide==true)
   hide =false;
   Document.getElementById(/*element*/).style="{max-height:"/*someheight*/"}"
else
   hide =true
   Document.getElementById(/*element*/).style="{max-height:"/*someotherheight*/"}"});
mautrok
  • 961
  • 1
  • 17
  • 41
0

I've written up a quick example using hover instead of hidden and height instead of max-height but it should work fairly similar if you change it.

https://jsfiddle.net/6pdu6tvz/4/

The only restriction is that the element that you want to change must appear after the element you want to hide.

You cannot change elements before on hover as answered here: How to style the parent element when hovering a child element?. I would recommend using Javascript if you can (although you specified in your question not to).

Community
  • 1
  • 1