Question

With YUI, I am creating a fixedcenter dialog, giving it a certain width:

var myDialog = new YAHOO.widget.Dialog("my-dialog", { 
    width : "300px", fixedcenter: true });

The content of the dialog is dynamic, and might be large enough that the height of the dialog becomes larger than the height of the viewport. For instance, see this example (to see/change the source click on the “+” at the top right). Make your browser window smaller before loading this example, and you’ll see you can’t reach the rest of the content in the dialog.

Instead of requiring users to scroll down in the main page to see the rest of the content, I’d like the body of the dialog to expend to the height of the viewport, and when this is not enough, I’d like to have a scrollbar inside the body. This is equivalent to having something like .bd { min-height: viewport-height; overflow: scroll }, where viewport-height is the height of the viewport, maybe minus what is necessary for the titlebar.

Setting this min-height could be done in JavaScript with code running when the dialog is shown and when the window is resized, but is there a better way to do this?

Answer 1

…but is there a better way to do this?

Nope – not with CSS.