Stretch Box in DIV

Discussion in 'HTML & Website Design' started by vvm, May 12, 2007.

0
  1. #1
    Hi, guys.

    Please help me with it:
    Can I make div box with "width:100%" and "height:100%" for all browsers?

    Here is my code:
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Stretch Box</title>
<style>
	body { margin:0; padding:0; height:100%;}
	div { width:100%; height:100%; border:1px solid #FF0000; }
</style>
</head>
<body>
<div>Stretch Box</div>
</body>
</html>
    Code (markup):
    Thanks in advance:)
    P.S.: 1 and 2 lines in code are important
     
    vvm, May 12, 2007 IP
  2. bacanze

    bacanze Peon

    Messages:
    2,419
    Likes Received:
    127
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You need to assign an ID to the div, like this

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* {margin:0; padding 0;}
	 wrapper{ width:100%; height:100%; border:1px solid #FF0000; }
</style>
<title>Untitled Document</title>
</head>

<body>
<div id="wrapper"></div>
</body>
</html>
    Code (markup):
     
    bacanze, May 12, 2007 IP
  3. vvm

    vvm Peon

    Messages:
    19
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Sorry, it doesn't work with ID "#wrapper"
     
    vvm, May 12, 2007 IP
  4. bacanze

    bacanze Peon

    Messages:
    2,419
    Likes Received:
    127
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You mean without it, sorry I was in a rush.

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* {margin:0; padding 0;}
	 #wrapper{ width:100%; height:100%; border:1px solid #FF0000; }
</style>
<title>Untitled Document</title>
</head>

<body>
<div id="wrapper"></div>
</body>
</html>
    Code (markup):
     
    bacanze, May 13, 2007 IP
  5. asfi

    asfi Peon

    Messages:
    110
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Use CSS elements
     
    asfi, May 13, 2007 IP
  6. parag

    parag Banned

    Messages:
    62
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I could get it to work only in FF by adding this
    position: absolute; 
top:0px;
    Code (markup):
    to the div element

    Maybe you can do it like this:
    Get the width & height of the browser by using JavaScript & then dynamically change the attributes of the div element to the values you got.

    I know this is a bit complicated but I think I have seen it somewhere.
    I don't recommend going into this as I said it is complicated & requires a lot of time & patience to get it working correctly.

    - Parag
     
    parag, May 13, 2007 IP
  7. vvm

    vvm Peon

    Messages:
    19
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Thank you for it.

    I know I can do this with JavaScript. But I was looking for answer through CSS.
     
    vvm, May 14, 2007 IP
  8. parag

    parag Banned

    Messages:
    62
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I thought you would knew. Added the info just in case....

    Its really frustrating not to get the desired results in all the browsers.
    Anyways good luck to you. Hope you get it done as you want :)

    - Parag
     
    parag, May 14, 2007 IP