By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,885 Members | 1,302 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,885 IT Pros & Developers. It's quick & easy.

Dynamic DIV container w. overflow:auto on Resize - w/o Java?!

P: 13
Hello everyone!

It seems I've finaly found a place with savy folks ;-) The following problem has me puzzeled - hopefully someone can help me out!

------------------------------------------------
- head -
------------------------------------------------
- - -
- m - -
- e - -
- n - content -
- u - -
- - -
------------------------------------------------
- footer -
------------------------------------------------

The layout above contains:

- a fixed head (width & height)
- a fixed menu (width & height)
- a content area (fixed width, overflow:auto)
- a fixed footer (width & height)

The overflow:auto in the content area is used to achieve a position:fixed effect, for almost all browsers, without using any hacks or java. A scrollbar is generated if the content becomes longer.

I'd like this DIV container to keep it's fixed width, but change it's height to fit the current vierwport.

Examples:

- Viewport size increases, so does the content container. The scollbar should dissapear once the window is large enough.

- Viewport size decreases, so does the content container. The scollbar should appear once the window becomes too small.

Can this be done - and can this be achieved without the use of Java?

Best regards,

MrPutty
Aug 7 '07 #1
Share this Question
Share on Google+
14 Replies


drhowarddrfine
Expert 5K+
P: 7,435
I assume you mean javascript and not java. Remember that java is not javascript.

What you want can be done with html/css. I have such a site but I can never remember what I did when someone asks. I'll have to look it up and get back to you later. I assume you want the footer to stick to the bottom?
Aug 7 '07 #2

P: 13
Thank you for your reply. Yes, the footer should stick to the bottom of the viewport. If possible, even after resizing the window. I'd love to see the coding you've used.
Aug 8 '07 #3

drhowarddrfine
Expert 5K+
P: 7,435
I will get this to you. Just busy, busy for me today.
Aug 8 '07 #4

drhowarddrfine
Expert 5K+
P: 7,435
Sorry it took so long. This is an actual site and I had to delete some things. It looks real sloppy to me so I wonder what I was doing. :)
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title></title>

<style type="text/css">



* {margin:0;padding:0}

html,body{height:100%}

html{width:100%;}

body{width:auto;background-color:#dfd}



#outer{min-height:100%;

margin-bottom:-1.5em;

height:auto;}



* html #outer{height:100%}



#footer{width:100%;clear:both;height:1.5em;backgro und-color:#ccc;}



#logo_header{background-image:url("subway_logo.gif");background-repeat: no-repeat;

background-color:green; height:55px;padding-top:0px}



#top_nav {position:relative;height:1.5em;min-width:771px;background-color:gray;color:yellow;line-height:1.5em}

#top_nav p{float:left;padding-left:1.5em;}

#top_nav ul{float:right;list-style-type:none;}

#top_nav li{float:left;padding:0 1.5em}



#page_content{background-color:#dfd;}



</style>

</head>

<body>



<div id="outer">

<div id="logo_header"></div>



<div id="top_nav">

<p></p>



<ul>

<li><a href="specialaccounts"></a></li>

<li><a href="personalaccounts"></a></li>

</ul>



</div>



<div id="page_content">





</div>

</div>

<div id="footer">



</div>



</body>

</html>
[/HTML]
Aug 9 '07 #5

P: 13
OMG. You're da man!

Last few hours I've been studing your code, modding it bit by bit. I've almost completely merged the two css codes. And here's what let my jaw drop to the floor. it works!.
Only IE5.5 and ealier have trouble centering the divs the way it want them to. Other than that it works like a charm.

Unbelievable.


;-)


Thanx a Million!


**was your server down this morning (gmt+1)?



...update: ..oh my. 'Tis to nice to be true. Got everything working except, decreasing the window size will not trigger the 'overflow:auto' I've added to the content area. I've attached the current state in a .zip file. The proper directory structure is included, so the css file will be found.

Could you please take a look at the effect, please? The overflow:auto is beeing completely ignored.

Cheers, MrPutty
Attached Files
File Type: zip html.zip (1.2 KB, 311 views)
Aug 9 '07 #6

drhowarddrfine
Expert 5K+
P: 7,435
Hm. I remember this and I thought it was solved. Perhaps I have an old version of that still online. I'll look for it but I'm gone most of the day.

Before I forget, all new web pages should use the strict doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

There is no need for transitional.
Aug 10 '07 #7

drhowarddrfine
Expert 5K+
P: 7,435
Remove 'overflow:hidden' from html,body in the css.
Add margin-bottom:1.5em to page_content
Aug 10 '07 #8

P: 13
Thank you for your reply! The scrollbar is now appearing on the viewport, as in your code posted above. But what I need is the DIV container (page_content) to generate the scrollbar, the viewport should have none.
This way the header/logo and navigation act like position:fixed, without actually having to use the position element itsself.
What I've been trying to do, is make the page_content div expand in length according to the viewport. Once the viewport is shorter than the page_content div, a scrollbar should appear on the div - not in the viewport.

I'm sorry if the topic or description isn't clear on this. (English is not my mothertounge;-)) I could offer to sketch my idea, if my description is insufficient.

Kind regards, MrPutty
Aug 10 '07 #9

P: 13
I've been on this the entire weekend - still no success.
What am I missing?



On the brink of css enforced lunacy,

MrPutty
Aug 13 '07 #10

P: 13
I hope these images help you help me :-)

Current state:




Needed state:

Aug 14 '07 #11

drhowarddrfine
Expert 5K+
P: 7,435
I'm going to use the zip file you have above unless something has changed. Let me know.
Aug 14 '07 #12

P: 13
Ooops - just noticed I can't add anohter attachment?

Here's the coding:

Expand|Select|Wrap|Line Numbers
  1. *{
  2.   margin:0;
  3.   padding:0;}
  4. html, body{
  5.   height:100%;}
  6. html{
  7.   width:100%;}
  8. body{
  9.   width:auto;
  10.   background-color:#ff0000;}
  11. #outer{
  12.   min-height:100%;
  13.   margin-bottom:-1.5em;
  14.   height:auto;
  15.   background-color:#00ff00;}
  16. * html #outer{
  17.   height:100%;}
  18. #footer{
  19.   width:726px;
  20.   margin:auto;
  21.   clear:both;
  22.   height:1.5em;
  23.   background-color:#0000ff;}
  24. #logo_header{
  25.   background-color:#330055;
  26.   background-repeat:no-repeat;
  27.   background-position:center;
  28.   width:726px;
  29.   margin:auto;
  30.   height:100px;
  31.   padding-top:0px;}
  32. #top_nav{
  33.   position:relative;
  34.   height:27px;
  35.   width:726px;
  36.   margin:auto;
  37.   background-color:#0f0f0f;
  38.   color:yellow;
  39.   line-height:1.5em;}
  40. #top_nav p{
  41.   float:left;
  42.   padding-left:1.5em;}
  43. #top_nav ul{float:right;
  44.   list-style-type:none;}
  45. #top_nav li{
  46.   float:left;
  47.   padding:0 1.5em;}
  48. #page_content{
  49.   background-color:#ff00f0;
  50.   width:726px;
  51.   margin:auto;
  52.   margin-bottom:1.5em
  53.   overflow:auto;}
  54. #menuleiste{
  55.   width:120px;
  56.   height:400px;
  57.   background-color:#ffffff;}

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title></title>
  5. <link rel="stylesheet" type="text/css" href="css_test.css">
  6. </head>
  7. <body>
  8. <div id="outer">
  9.   <div id="logo_header">HEADER</div>
  10.   <div id="top_nav">
  11.     <p></p>
  12.     <ul>
  13.       <li>Link_1</li>
  14.       <li>Link_2</li>
  15.     </ul>
  16.   </div>
  17.   <div id="page_content"><div id="menuleiste">Menu</div>
  18.   <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen. Aber bin ich deshalb ein schlechter Text? Ich weiss, dass ich nie die Chance haben werde, im Stern zu erscheinen. Aber bin ich darum weniger wichtig? Ich bin blind! Aber ich bin gerne Text. Und sollten Sie mich jetzt tatsächlich zu Ende lesen, dann habe ich etwas geschafft, was den meisten normalen Texten nicht gelingt.</p></div>
  19. </div>
  20. <div id="footer">FOOTER</div>
  21.  
  22. </body>
  23. </html>
Aug 14 '07 #13

drhowarddrfine
Expert 5K+
P: 7,435
Now I understand. Normally you would use 'overflow:scroll' for this but the height of that div must be limited. I didn't get to test this but that is what you want.
Aug 14 '07 #14

P: 13
I've tried adding max- and min-height attribute, doesn't seem to have any effect.
The divs are not beeing pushed together when the viewport is resized, so no scrollbar is generated.

Does this mean the html or body tag need limiting?
Aug 14 '07 #15

Post your reply

Sign in to post your reply or Sign up for a free account.