Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS div height 100% ??

Reply
Thread Tools

CSS div height 100% ??

 
 
Nico Schuyt
Guest
Posts: n/a
 
      11-20-2003
The last couple of hours I desperately tried to give a div containing a menu
the same height as the div with the content.
In standard mode it's not a problem buth with doctype 'strict' I fail.
Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
The height of the left (menu) div however is not more than the height of the
screen.

Your help is appreciated!
Nico


 
Reply With Quote
 
 
 
 
John W.
Guest
Posts: n/a
 
      11-20-2003
"Nico Schuyt" <(E-Mail Removed)> wrote:

>The last couple of hours I desperately tried to give a div containing a menu
>the same height as the div with the content.
>In standard mode it's not a problem buth with doctype 'strict' I fail.
>Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
>The height of the left (menu) div however is not more than the height of the
>screen.
>

You looked with IE, in Moz + O it's worse


John OO
--
<http://webcel.nl/> webshopsoftware + more

"Time is what prevents everything from happening at once"
- John Archibald Wheeler -
 
Reply With Quote
 
 
 
 
picayunish
Guest
Posts: n/a
 
      11-20-2003
Nico Schuyt wrote in news:3fbd23b0$0$56498$(E-Mail Removed):
> The last couple of hours I desperately tried to give a div containing a
> menu the same height as the div with the content.
> In standard mode it's not a problem buth with doctype 'strict' I fail.
> Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
> The height of the left (menu) div however is not more than the height of
> the screen.
>
> Your help is appreciated!


Correct me when I'm wrong.
When using 100% for the height or width it means the maximum height or
width of the browser window that the visitor has set. In your case try to
use a height of 253% or try using em for height.
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Underconstruction


 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      11-20-2003

"Nico Schuyt" <(E-Mail Removed)> wrote in message
news:3fbd23b0$0$56498$(E-Mail Removed)...
> The last couple of hours I desperately tried to give a div containing a

menu
> the same height as the div with the content.
> In standard mode it's not a problem buth with doctype 'strict' I fail.
> Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
> The height of the left (menu) div however is not more than the height of

the
> screen.
>
> Your help is appreciated!


The general consensus is that this can't be done without resorting to CSS
tables which, of course, don't work on a certain high profile browser.

There are some suggested workarounds, mainly involving backgrounds, so it
"looks" like the left hand div extends to the bottom of the content.

Here is a page where I was experimenting with it. The middle bit is what you
are after. Fiddle around with those commented out borders to see what is
hapenning.

http://users.bigpond.net.au/rf/html/notable.html

Cheers
Richard.


 
Reply With Quote
 
Wayne D Hammond
Guest
Posts: n/a
 
      11-21-2003
Nico Schuyt wrote:
> The last couple of hours I desperately tried to give a div containing a menu
> the same height as the div with the content.
> In standard mode it's not a problem buth with doctype 'strict' I fail.
> Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
> The height of the left (menu) div however is not more than the height of the
> screen.
>
> Your help is appreciated!
> Nico
>
>

The height is the same using Mozilla 1.5

 
Reply With Quote
 
Eric B. Bednarz
Guest
Posts: n/a
 
      11-21-2003
"rf" <(E-Mail Removed)> writes:

> "Nico Schuyt" <(E-Mail Removed)> wrote:


>> The last couple of hours I desperately tried to give a div containing a
>> menu the same height as the div with the content.


Use a table. DIV-soup isn't any better.

>> Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
>> The height of the left (menu) div however is not more than the height of
>> the screen.


I wouldn't use float in the first place; anyway, you are trying to make
things far too complicated. Quick and lazy:

<http://sandbox.bednarz.nl/css/height/float.html>

> The general consensus is that this can't be done without resorting to CSS
> tables which, of course, don't work on a certain high profile browser.


Too bad I've missed that.

By the way, random markup is only needed for the high profile browser to
accomplish such an effect.

<http://sandbox.bednarz.nl/css/height/cols.html>

(there are some possible problems with narrow windows/large font sizes
if viewed with MSIE because of the URI string at the bottom, something
I'm currently to lazy to fix, but that's unrelated to the OP's query)


--
| ) Eric Bednarz
-(
| ) http://bednarz.nl/
 
Reply With Quote
 
Nico Schuyt
Guest
Posts: n/a
 
      11-21-2003
Eric B. Bednarz wrote:
>> "Nico Schuyt" <(E-Mail Removed)> wrote:


>>> The last couple of hours I desperately tried to give a div
>>> containing a menu the same height as the div with the content.


> Use a table. DIV-soup isn't any better.


Maybe you're right

>>> Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
>>> The height of the left (menu) div however is not more than the
>>> height of the screen.


> I wouldn't use float in the first place; anyway, you are trying to
> make things far too complicated. Quick and lazy:
> http://sandbox.bednarz.nl/css/height/float.html


So, one column instead of two. I must admit I didn't think of that!
In this particular case I thought I needed two columns in order to show the
possibilities of CSS (e.g change the order of the columns: menu on the right
for example). But maybe I can do that with one column too.

Thanks!!
Nico


 
Reply With Quote
 
Nico Schuyt
Guest
Posts: n/a
 
      11-21-2003
picayunish wrote:
> Nico Schuyt wrote in news:3fbd23b0$0$56498$(E-Mail Removed):
>> The last couple of hours I desperately tried to give a div
>> containing a menu the same height as the div with the content.
>> In standard mode it's not a problem buth with doctype 'strict' I
>> fail. Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
>> The height of the left (menu) div however is not more than the
>> height of the screen.
>>
>> Your help is appreciated!

>
> Correct me when I'm wrong.
> When using 100% for the height or width it means the maximum height or
> width of the browser window that the visitor has set.


I think you're right.

> In your case
> try to use a height of 253% or try using em for height.


Not practical I'm affraid. Probably the solution offered by Eric Bednarz
(one column) is the easiest approach
Thanks for your help.
Nico


 
Reply With Quote
 
Nico Schuyt
Guest
Posts: n/a
 
      11-21-2003
rf wrote:
> "Nico Schuyt" <(E-Mail Removed)> wrote


>> The last couple of hours I desperately tried to give a div
>> containing a menu the same height as the div with the content.
>> In standard mode it's not a problem buth with doctype 'strict' I
>> fail. Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
>> The height of the left (menu) div however is not more than the
>> height of the screen.


> The general consensus is that this can't be done without resorting to
> CSS tables which, of course, don't work on a certain high profile
> browser.
> There are some suggested workarounds, mainly involving backgrounds,
> so it "looks" like the left hand div extends to the bottom of the
> content.


Seems to be the best solution so far.

> Here is a page where I was experimenting with it. The middle bit is
> what you are after. Fiddle around with those commented out borders to
> see what is hapenning.
> http://users.bigpond.net.au/rf/html/notable.html


Ehhh, what's the intention of the test page? I don't see high columns
anywhere (must be my age

Thanks so far,
Nico


 
Reply With Quote
 
Nico Schuyt
Guest
Posts: n/a
 
      11-21-2003
Wayne D Hammond wrote:
> Nico Schuyt wrote:


>> <snip>
>> Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
>> The height of the left (menu) div however is not more than the
>> height of the screen.


> The height is the same using Mozilla 1.5


So there is hope I think I'll wait a couple of years till all browsers
have a new version and try again.
Thanks,
Nico


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Tetration (print 100^100^100^100^100^100^100^100^100^100^100^100^100^100) jononanon@googlemail.com C Programming 5 04-25-2012 08:49 PM
CSS div height 100% jaschreiber@gmail.com HTML 3 05-22-2006 07:18 AM
Nested Div. Height:100%. Does more than 100% celineusa@gmail.com HTML 8 12-09-2005 08:57 AM
100% TABLE + 100% ROW + 100% DIV..? fred Javascript 3 03-17-2005 04:25 AM
CSS 2 columns (1 nav + 1 content) 100% height & 100% width Not4u HTML 9 02-27-2004 10:09 AM



Advertisments