Goro 0

Hello,

I am trying to have a layout that stretches freely to fill the whole screen (width: 100%, height: 100%) but with a miminum size (1024x768). Simple CSS:

div#topframe {
    height: 100%;
    width: 100%;
    min-height: 768px;
    min-width: 1024px;
}

But of course IE does not want to do this. Various fixes for min-height usually address situations where boxes are resized to fit content, but I need the div to be as big as the screen, or 1024x768 if the screen is too small.

Are there any elegant solutions for this?

Thanks,

1 answer

Ktash 1851
2
points
This was chosen as the best answer

So, there are a lot of ways to accomplish this (Expression Statements, Padding and Border hacks, etc.). Personally, if I have to support IE 6 and below for min-height and width, I use conditional comments and expressions to get what I need done. For you, it'd be something like:

<!--[if IE 6]><style type="text/css">
    div#topframe {
         width: expression(document.body.clientWidth < 1024 ? '1024px' : '100%');
         height: expression(document.body.clientHeight < 768 ? '768px' : '100%);
    }
</style><![endif]-->

Also, as a recommendation, 1024x768 is the actual resolution of the users screen, and not necessarily the width and height of the browser window, nor the available drawing space for the website. So users that have that resolution natively will have to scroll a bit, which could be annoying.

Answered over 7 years ago by Ktash