Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > html css > answers

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

Newbie
  
Join Date: Aug 2007
Posts: 13
#1: Aug 7 '07
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

drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,830
#2: Aug 7 '07

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

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?
Newbie
  
Join Date: Aug 2007
Posts: 13
#3: Aug 8 '07

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

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.
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,830
#4: Aug 8 '07

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

I will get this to you. Just busy, busy for me today.
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,830
#5: Aug 9 '07

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

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]
Newbie
  
Join Date: Aug 2007
Posts: 13
#6: Aug 9 '07

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

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, 103 views)
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,830
#7: Aug 10 '07

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

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.
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,830
#8: Aug 10 '07

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

Remove 'overflow:hidden' from html,body in the css.
Add margin-bottom:1.5em to page_content
Newbie
  
Join Date: Aug 2007
Posts: 13
#9: Aug 10 '07

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

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
Newbie
  
Join Date: Aug 2007
Posts: 13
#10: Aug 13 '07

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

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



On the brink of css enforced lunacy,

MrPutty
Newbie
  
Join Date: Aug 2007
Posts: 13
#11: Aug 14 '07

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

I hope these images help you help me :-)

Current state:




Needed state:
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,830
#12: Aug 14 '07

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

I'm going to use the zip file you have above unless something has changed. Let me know.
Newbie
  
Join Date: Aug 2007
Posts: 13
#13: Aug 14 '07

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

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>
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,830
#14: Aug 14 '07

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

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.
Newbie
  
Join Date: Aug 2007
Posts: 13
#15: Aug 14 '07

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

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?
Reply

« previous question | next question »

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/other

Forums
Visit our community forums for general discussions and latest on Bytes

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 229,155 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved