Nested Div. Height:100%. Does more than 100%

C

celineusa

Hi All,

I am using CSS, and nested DIV.
I have a container div which is set to height: 100%.
On my page, inside my container div, I have many divs.
On the top, I have a div for the logo with height:100px
Under, I have my menu background on the left in another div that is
supposed to take the rest of the page in height, and stretch if
necessary. I fixed the height to 100%.
However, the total height of the page now does 100%+100px
How do I make my page do 100% and not 100%+100px?

Thank you for any help!

Celine
 
N

Neredbojias

With neither quill nor qualm, (e-mail address removed) quothed:
Hi All,

I am using CSS, and nested DIV.
I have a container div which is set to height: 100%.
On my page, inside my container div, I have many divs.
On the top, I have a div for the logo with height:100px
Under, I have my menu background on the left in another div that is
supposed to take the rest of the page in height, and stretch if
necessary. I fixed the height to 100%.
However, the total height of the page now does 100%+100px
How do I make my page do 100% and not 100%+100px?
Click to expand...

Use padding-top:100px; for a sub-container div inside the container div
and position the logo div absolutely (from outside).
 
C

celineusa

Hey, thank you very much for the answer. The padding works, but it
still adds a 100% under the 100px...

Any other ideas?

And also, if my body text is more than the page length, it will scroll
down, but the menu will only stretch to a 100%, and not more.
Any thoughts?

Thanks,
Celine
 
N

Neredbojias

With neither quill nor qualm, (e-mail address removed) quothed:
Hey, thank you very much for the answer. The padding works, but it
still adds a 100% under the 100px...

Any other ideas?
Click to expand...

The padding-top should be on the sub-con div which does _not_ have 100%
height designated. Also, what dtd are you using? That could make a
difference. It's best to use html 4.01 strict.
And also, if my body text is more than the page length, it will scroll
down, but the menu will only stretch to a 100%, and not more.
Any thoughts?

Thanks,
Celine
Click to expand...
 
C

celineusa

Thank for the answer! I really appreciate.
I am using
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I can't use a strict DTD otherwise is messes up my menu (switching menu
with pictures).
Moreover, I tried not to set the height to 100%, but since it contains
a background, it won't go to to the bottom of my page...
Plus, if that maintext goes over the length of the page, my gradients
on the side (in another div that starts from the top, and set to
height:100%) stop at a 100%...
I thought I was going to use DIV cause you can't set the table height
to 100%, but I guess that I'll go back to tables!! lol

Any thoughts?
Thank you,
celine
With neither quill nor qualm, (e-mail address removed) quothed:
Hey, thank you very much for the answer. The padding works, but it
still adds a 100% under the 100px...

Any other ideas?
Click to expand...

The padding-top should be on the sub-con div which does _not_ have 100%
height designated. Also, what dtd are you using? That could make a
difference. It's best to use html 4.01 strict.
Click to expand...
 
N

Neredbojias

With neither quill nor qualm, (e-mail address removed) quothed:
Thank for the answer! I really appreciate.
I am using
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I can't use a strict DTD otherwise is messes up my menu (switching menu
with pictures).
Moreover, I tried not to set the height to 100%, but since it contains
a background, it won't go to to the bottom of my page...
Plus, if that maintext goes over the length of the page, my gradients
on the side (in another div that starts from the top, and set to
height:100%) stop at a 100%...
I thought I was going to use DIV cause you can't set the table height
to 100%, but I guess that I'll go back to tables!! lol

Any thoughts?
Thank you,
celine
Click to expand...

Css isn't perfect, and sometimes tables are the better solution for a
particular "problem". Perhaps if you post a url, I and others might get
a better read on things.
 
C

celineusa

thank you for your reply!!
Finally, I changed my mind. I'm gonna keep working with divs, but I
will forget about making the height 100%. So I'll see what I'll do
instead!

Thanks anyway!!

Celine
 
C

celineusa

thank you for your reply!!
Finally, I changed my mind. I'm gonna keep working with divs, but I
will forget about making the height 100%. So I'll see what I'll do
instead!

Thanks anyway!!

Celine
 
N

Neredbojias

With neither quill nor qualm, (e-mail address removed) quothed:
thank you for your reply!!
Finally, I changed my mind. I'm gonna keep working with divs, but I
will forget about making the height 100%. So I'll see what I'll do
instead!
Click to expand...

Probably the best idea. 100% height is tricky and imperfectly supported
across browsers, anyway.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Set div height to 100% minus a fixed pixel value? 21
How can I get my menu inside of a menu to function properly? 1
Clickable Div Block 1
Flip-Cards with Local Images 1
Stuck with html and css 25
Need help , Having problem with Drag n Drop... 1
Help with code 0
Need help , Having problem with Drag n Drop ? 9

Members online

No members online now.
Total: 35 (members: 2, guests: 33)
Robots: 413

Forum statistics

Threads
473,770
Messages
2,569,584
Members
45,075
Latest member
MakersCBDBloodSupport

Latest Threads

Top