views:

51

answers:

4

So I'm inspecting this site: http://www.grittirollo.it/ and it appears that the content that slides out has a fixed height. Is there no way to set this dynamically?

A: 

It appears as though the developer measured out how tall each portion of the sliders' box model would be when rendered, and then multiplied it by how many rows there were. From there, he/she set it manually in the CSS.

amphetamachine
A: 

That seems like a terrible idea to do manually. I set the overflow to hidden in my 'container' div and all the child divs expanded to the size of my containing div. Works great... Just not sure why overflow: hidden would actually be the trick here. An explanation would be much appreciated.

Ellis
Not all examples are good examples.
reisio
@Ellis: this *answer* should be a comment. Use *add comment* instead.
JohnB
A: 

Elements on a webpage can typically be measured with their scrollHeight JavaScript property (element.scrollHeight) however some browsers don't have this and some browsers do it differently from others. (I believe Firefox's has to be done recursively down the tree of elements and Safari just uses the outermost element.) This should be possible without manually setting the height using JavaScript, you just may have to conditionally code it to work with all the browsers you want to support.

Peter Zich
A: 

I don't see why it's necessary to set it dynamically. If the stuff is float:left; and they put a <div class="clear"> at the bottom of a hide-able section, you would be able to see the contents of that section when it was un-hidden with JavaScript. You could then adjust the layout with padding and margin to make it look pretty.

Or, they could have also used position:relative; and position:absolute; to layout the hide-able sections. It comes down to preference.

JohnB