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
14  14290 
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?
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.
I will get this to you. Just busy, busy for me today.
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;paddi ng:0}
html,body{heigh t:100%}
html{width:100% ;}
body{width:auto ;background-color:#dfd}
#outer{min-height:100%;
margin-bottom:-1.5em;
height:auto;}
* html #outer{height:1 00%}
#footer{width:1 00%;clear:both; height:1.5em;ba ckground-color:#ccc;}
#logo_header{ba ckground-image:url("subw ay_logo.gif");b ackground-repeat: no-repeat;
background-color:green; height:55px;pad ding-top:0px}
#top_nav {position:relat ive;height:1.5e m;min-width:771px;bac kground-color:gray;colo r:yellow;line-height:1.5em}
#top_nav p{float:left;pa dding-left:1.5em;}
#top_nav ul{float:right; list-style-type:none;}
#top_nav li{float:left;p adding:0 1.5em}
#page_content{b ackground-color:#dfd;}
</style>
</head>
<body>
<div id="outer">
<div id="logo_header "></div>
<div id="top_nav">
<p></p>
<ul>
<li><a href="specialac counts"></a></li>
<li><a href="personala ccounts"></a></li>
</ul>
</div>
<div id="page_conten t">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
[/HTML]
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
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.
Remove 'overflow:hidde n' from html,body in the css.
Add margin-bottom:1.5em to page_content
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
I've been on this the entire weekend - still no success.
What am I missing?
On the brink of css enforced lunacy,
MrPutty
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: matthewmacchia |
last post by:
I believe this is a Firefox bug but I was hoping someone found a
workaround.
I have implemented drag and drop functionality, but if I try to drag an
element from a div that happens to have a div with an "overflow: auto"
it seems to lose the onmouseover event for my target.
Anyone come across this issue and found a resolution?
Please advise.
Here is a link to my code.
|
by: Harry |
last post by:
I just implemented an "overflow: auto" for a div in the main message
window: http://www.auriance.com/docs/interaction/
This works as expected in Internet Explorer and Opera, but in Firefox
it doesn't. There shouldn't be a scrollbar on the page, but instead, on
the div that shows the messages.
Any idea?
Thanks,
|
by: reycri |
last post by:
I have a page that works as I intend in IE but not in Firefox:
<html>
<head>
<title>Overflow Test</title>
</head>
<body style='overflow:hidden; margin:0; padding:0;'>
<table border='0' cellpadding='0' cellspacing='0'
style='border-collapse:collapse; width:100%; height:100%;'>
<tr><td colspan='2' style='height:3em; border-bottom:1px solid
|
by: kaczmar2 |
last post by:
I have a webpage that has 2 main DIVs - a title div and a content div.
I want the title dive to always "stick to the top of the page and
not scroll, regardless of the size of the window. The content div
should have a scrollbar that sits underneath the title div. I have
some event handlers in Javascript that handle calculating the size of
the content div.
Everything works fine in IE/Firefox when I remove the DTD from my
|
by: Otto de Voogd |
last post by:
I posted the problem below in alt.www.webmaster before, but no-one knew
the answer, however someone suggested this group as a good place to ask.
I am trying to fit images into a browser window using CSS and
in particular overflow:auto; The idea being that if a user's window is too
small the image becomes scrollable (horizontally) and a horizontal
scrollbar appears.
It works nicely in Firefox and Opera but with Internet Explorer 7 a...
| | |
by: vunet.us |
last post by:
How can I hide scrollbars which appear in my floating div element with
CSS property overflow:auto?
I do need to use auto overflow.
Thank you.
|
by: Jake Barnes |
last post by:
I searched comp.lang.javascript on Google Groups but I didn't find an
answer when I searched for "viewport" or "viewport div" or any
combination of words using "viewport" so now I think I'm searching for
the completely wrong thing. Perhaps someone can tell me what I should
be searching for?
I've got a div with overflow set to "auto":
overflow:auto
|
by: obanite |
last post by:
Hi!
I'm having issues with css in FF and IE regarding overflow: auto and font-size.
If I have a div like this:
<div style="overflow: auto">
<span>ipsumlorendictowhateveripsumlorendictowhateveripsumlorendictowhateveasdasdripsumlorendictowhateverasdasdasdjasjdioasjiosdjasiojdoasjisdojiasojdo
</span>
</div>
|
by: Anz |
last post by:
Can any one know the javascript function to auto resize the swf when
resizing its pop up window.
I need to auto resize the swf when i resize my popup window in which
the swf is displayed.
Is there any javascript function available to perform this
requirement ?
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| | |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
