Question

I understand that different browsers are likely to have different ceiling values, but what is a good rule of thumb for the maximum render-able CSS height/width in a given browser?

For example, this trick:

.parent{
    overflow: hidden;
}

.column{
    float: left;
}

.max-height{
    margin-bottom: -30000px;
    padding-bottom: 30000px;
}

<div class="parent">

    <div class="column">
    </div>

    <!-- given a background color, this div will appear to expand to 100% the
         parent height -->
    <div class="column max-height">
    </div>

</div>

I know it’s nearly stupid, but if a page were to expand beyond 30000px, now the trick doesn’t work.

I’ve seen 32768px used in various places; is this due to higher values being unreliable, or just because its a nice square number?

Answer 1

I’d be tempted to have a look at what values can be returned from javascript in the screen object available height

    <script type="text/javascript">

     document.write("Available Height: " + screen.availHeight);
     document.write("Available Width: " + screen.availWidth);

    </script> 

Using jquery you could set the body height and width to these values using the .css function if you pass them in as variables such as.

var screenHeight = screen.availHeight

of course this assumes if javascript is enabled on the clients browser