PDA

Click to See Complete Forum and Search --> : setting min width and height of div element



MyFriendIsATaco
01-05-2007, 08:22 PM
right now i have a div element that is set to 100% width and 100% height of the browser window, but i want to set the min width to 768 and min height to 1024 that way if the screen is bigger, it scales to that size, but never scales smaller than 1024x768.

how can i achieve this?

MyFriendIsATaco
01-05-2007, 09:07 PM
ok, i got it CLOSE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Sage Community Group</title>
<script language="javascript">
window.onresize=adjustDiv;

function adjustDiv()
{
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
var sage = document.getElementById("sage");
if(myWidth<1024) sage.style.width='1024px';
else sage.style.width='100%';
if(myHeight<768) sage.style.height='768px';
else sage.style.height='100%';

}
</script>
<style type="text/css">
html {
height: 100%;
overflow: auto;
}

#sage {
height: 100%; background-color:#F00;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>

<body onload="adjustDiv();">
<div id="sage">
</div>
</body>
</html>i got it to do what i want it to do, but now, there is a vertical scrollbar there at all times because at the very bottom of the page, its like there is a 5px margin that is causing the page to be taller than just the div. i cannot get that margin to go away!

MyFriendIsATaco
01-05-2007, 09:17 PM
and i found out its only doing it on firefox for both mac and pc. IE and safari both render it correctly.

aversion
01-06-2007, 10:28 AM
Modern standards compliant browsers (not IE) support the CSS2 properties:

min-height
min-width

These properties have been part of standards since 1997 but MS decided to ignore them.

Search on the web for hacks for IE. I've never had to use them but I'm pretty sure there are some simpler solutions for IE than all that javascript.

MyFriendIsATaco
01-07-2007, 01:36 AM
thank you, i will have to look into that. ie screws everything up! :)

catbert303
01-07-2007, 08:03 AM
If you're fortunate enough not to need to worry too much about IE 6 and older, I think IE 7 does now support min-width and min-height.