Maximum allowable height in pixels, CSS
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: -300开发者_StackOverflow00px;
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?
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
精彩评论