<div> height

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 427,207 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,135 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 1261 | Replies: 3

•

Join Date: Apr 2008

Posts: 3

Reputation: andre1011 is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

andre1011

Offline

Newbie Poster

<div> height

Apr 27th, 2008

I have a <div> that will not extend all the way down the page even with the height set to 100% on the <html> and <body> and the div itself. It will not display correctly in ie7 or firefox.

I have an external style sheet but this is basicly the structure of the page

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<html>
<head>
<body>
   <div id="wrapper">
      <div id="colWrapper">
      </div>
   </div>
</body>
</head>
</html>
<html>
<head>
<body>
   <div id="wrapper">
      <div id="colWrapper">
      </div>
   </div>
</body>
</head>
</html>

CSS:

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
html {height:100%;}
          body{height:100%;}
          #wrapper{height:100%;}
          #colWrapper{height:100%}
html {height:100%;}
          body{height:100%;}
          #wrapper{height:100%;}
          #colWrapper{height:100%}

I would like any help someone can give me thanks

Last edited by peter_budo : Apr 27th, 2008 at 3:35 am. Reason: Keep It Organized - please use [code] tags

•

Join Date: Jan 2008

Posts: 71

Reputation: amigura is an unknown quantity at this point

Rep Power: 1

Solved Threads: 7

amigura

Offline

Junior Poster in Training

Re: <div> height

Apr 27th, 2008

it works ok on ie7 and opera for me. 1 is not a ff user.

Help with Code Tags

(Toggle Plain Text)

<html>
<head>
<style type="text/css">
html {height:100%;}
          body{height:100%;  background:#0066FF}
          #wrapper{height:100%; background:red}
          #colWrapper{height:100%; width:80%; background:yellow}
</style>

</head>		  
<body>
   <div id="wrapper"> wrapper text
      <div id="colWrapper"> colWrapper text
      </div>
   </div>
</body>
</html>

http://www.amigura.co.uk

•

Join Date: Jan 2007

Posts: 2,556

Reputation: MidiMagic is on a distinguished road

Rep Power: 7

Solved Threads: 115

MidiMagic

Offline

Posting Maven

Re: <div> height

Apr 28th, 2008

Generally you can't control the vertical height of a screen object to match the size of the browser window. This is because there are too many possibilities among different browsers and window sizes.

Div is also very poorly designed and implemented. It generally assumes the height of the tallest object inside it.

Daylight-saving time uses more gasoline

•

Join Date: Apr 2008

Posts: 3

Reputation: andre1011 is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

andre1011

Offline

Newbie Poster

Re: <div> height

Apr 29th, 2008

Thanks I got it to work in ie6 still working on firefox

•

Originally Posted by amigura

it works ok on ie7 and opera for me. 1 is not a ff user.
Help with Code Tags

(Toggle Plain Text)
<html>
<head>
<style type="text/css">
html {height:100%;}
          body{height:100%;  background:#0066FF}
          #wrapper{height:100%; background:red}
          #colWrapper{height:100%; width:80%; background:yellow}
</style>

</head>		  
<body>
   <div id="wrapper"> wrapper text
      <div id="colWrapper"> colWrapper text
      </div>
   </div>
</body>
</html>
<html> <head> <style type="text/css"> html {height:100%;} body{height:100%; background:#0066FF} #wrapper{height:100%; background:red} #colWrapper{height:100%; width:80%; background:yellow} </style> </head> <body> <div id="wrapper"> wrapper text <div id="colWrapper"> colWrapper text </div> </div> </body> </html>