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

Code:

<!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.

Thread: setting min width and height of div element

Thread Tools

Display

setting min width and height of div element

Posting Permissions