HOW TO: overflow:scroll div inside position:fixed div?

[jakovbak]

Hello!
What I need here is most likely some java magic but this was the only forum section, at least remotely, connected to my problem. Here's my starting point:

Basic HTML:

Code: Select all

<div id="header">
</div>

<div id="container">
     <div id="content">
     </div>
</div>

<div id="footer">
</div>

And this is basic CSS:

Code: Select all

#header {
     height: 110px;
     position: fixed;
}

#container {
     height: [color=#BF0000]??????????[/color];
     position: fixed;
     top: 110px;
}

#content {
     height: [color=#BF0000]??????????[/color];
     overflow: scroll;
}

#footer {
     height: 70px;
     position: fixed;
     bottom: 0;
}

What I need to achieve is this:
- div#container is position:fixed but I need it's height to be adaptive to browser window height;
- div#content needs to be overflow:scroll but it's height should depend on adaptive height of div#container;

I don't think it can be done with pure CSS but some javascripting could get the job done. And it's beyond my skills... If you have an idea how to solve this I would highly appreciate it!
Best regards,
Jakov

[velden]

I believe using javascript is tricky because in case some user doesn't use/allow js your whole site will not 'work'.

Further, I almost never use fixed blocks (maybe only for social 'banner/label'). I think fixed blocks will not always work so well on mobile devices.

Don't you think there's another way to accomplish what you want? Maybe post a picture of the design?

[jakovbak]

Hello velden!
I'm glad to "see" you again! You can check this

http://www.harironcevic.com/test/index.php?page=a

This page is giving me headache! There is a scrollbar on the right but I can't figure out how to fit this <div> between (so called) header and footer.
If you take a look on the other pages you'll see everything looks ok (at least on my browser, that site is being redesigned so I haven't test it on all major browsers).
So, why do I need this hight-fit option in the first place?
First, check this page:

http://www.harironcevic.com/test/index.php?page=albumi

That's a list of all albums by Hari Roncevic, croatian singer/songwriter. Every song listed here could be found in "Lyrics" (first link in this post). One can browse songs alphabetically or go to specific song from album list. And here's the catch: There is an anchor placed on each title in the song list so once visitor clicks on a song title in album list, he/she is taken directly to the lyrics of that particular song. The problem is that song title is placed on the top of the browser's window. Since I have fixed "header", the title and first few lines of song are practically hidden behind that fixed div(s) at the top of the page.

I was trying to figure out how to define anchors to be displayed at lower position but came up with nothing. Then I googled a bit on fixed divs and overflow settings and what I came up with is - let's be honest - shabby, sloppy, ugly solution! I saw a couple of posts on different forums where the solution to this problem was defined as java-based trick but noone actually explained how to do it or possible consequences.

Among these solutions I was thinking this one would be least complicated. What do you think?

[velden]

Well, I don't understand why using fixed positioning for the blocks except footer.

With jQuery you could calculate quite easily the height of the window.
Then subtract the height of the complete header (parts) and the height of the footer. Then you know how many pixels there are left for your #middle div. You can set that height by jQuery too.

Then, you need to calculate and set that height on page ready AND page resize.

Example (not tested):

Code: Select all

<__script__ src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></__script>
<__script__ type="text/javascript">// <![CDATA[

$(window).load(function() {

	//init vars
	var theWindow = $(window),
	middle = $('#middle'),

	//footer height
	ftrH = $('#footer').height();

	//header height
	hdrH = $('#header').height();

	function resizeMiddle() {

		//calculate 
		middleHeight = theWindow.height()-ftrH-hdrH ;

		//set
		$middle.css( { height:middleHeight+'px' } );
	}


	theWindow.resize(function() {
		resizeMiddle();
	} ).trigger("resize");
} );

// ]]></__script>

[jakovbak]

I know what you mean, I don't like fixed blocks either.
But in this case it seemed like reasonable solution because the nature of the page itself...
All of the other pages have fixed header and footer because client wanted those two blocks to be visible all the time. And it's ok because the contents of those pages don't suffer with fixed blocks.
On the other hand, this particular page with songs lyrics, led me to another problem which I thought it would be easy to solve but turned out a little more complicated than it seemed...
On this page I need a Level2 menu with letters of alphabet so user could browse through songs or search for lyrics via song title. For this kind of actions, if nothing else, at least this "alphabetical" menu should be fixed. Actual version of the site
(http://www.harironcevic.com/index.php?page=k)
is quite inadequate on this matter because (like in previous link for letter "k"), some of the letters contain many songs and if user scrolls all the way down then he/she must scroll all the way back to see this menu again and to go on another letter.
It crossed my mind at some point that I could put some kind of "back on the top" link which would appear after one, one and a half height of browser window... But still, it doesn't solve the problem with anchor elements being hidden behind fixed blocks.
I was struggling with this for days and I was prepared for the fact some users disallow js, I was prepared for creating another .css for mobile devices, whatever... Because everything else seemed way too complicated.
Thank you for the code, I'll try it later and get back to you.
Best regards!

[jakovbak]

Hello velden!
I've been very busy last week and I came back to "our" problem just now...
I can't make it work and here is the code I have used:

Code: Select all

{process_pagedata}
<!DOCTYPE html>

<__html>

<head>
<title>{sitename} - {title}</title>
{metadata}
{cms_stylesheet}

<__script__ src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></__script>
<__script__ type="text/javascript">// <![CDATA[

$(window).load(function() {

   //init vars
   var theWindow = $(window),
   middle = $('#middlefix'),

   //footer height
   ftrH = $('#footerfix').height();

   //header height
   hdrH = $('#headerfix').height();

   function resizeMiddle() {

      //calculate 
      middleHeight = theWindow.height()-ftrH-hdrH ;

      //set
      $middle.css( { height:middleHeight+'px' } );
   }


   theWindow.resize(function() {
      resizeMiddle();
   } ).trigger("resize");
} );

// ]]></__script>

</head>

</__body>

<div id="headerfix">
	{global_content name='01header'}
	{global_content name='02titleandsearch'}

	<div id="menuL2">
		{menu number_of_levels="1" start_level="2" template="minimal_menu.tpl"}
	</div>
</div>

<div id="middlefix">
	<div id="textFrame" class="textFrame">
		{content}
	</div><!-- end #textFrame -->
</div><!-- end #middlefix -->

<div id="footerfix">									
	{global_content name='03footer'}
</div><!-- end #footerfix -->

{Statistics}

<__body>

</__html>

And this is the part of .css for most important div's:

Code: Select all

#headerfix {
	width: 100%;
	height: 170px;
	position: fixed;
	top: 0;
	z-index: 1000;
}
#middlefix  {
	width: 100%;
	overflow-y: scroll;
}
#footerfix {
	width: 100%;
	height: 70px;
	background-color: #000;
	margin: 0;
	padding: 0;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1000;
}

Probably I'm doing something wrong in .css but I can't figure out what.
Here's the link to one page I've tried to modify with this code...

http://www.harironcevic.com/test/index.php?page=a

If you have some time to take a look on this maybe you'll find what's wrong.
Best regards from finally sunny croatian coast!
Jakov

[velden]

at least one typo in my code:

Code: Select all

//set
      middle.css( { height:middleHeight+'px' } );

(remove dollar sign: $middle -> middle)

[jakovbak]

HA!
It works like a charm now! With some additional changes in .css too...
Now both codes are supposed to be like it follows (without my div's except #headerfix, #middlefix and #footerfix):

Code: Select all

{process_pagedata}
<!DOCTYPE html>

<__html>

<head>
<title>{sitename} - {title}</title>
{metadata}
{cms_stylesheet}

<__script__ src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></__script>
<__script__ type="text/javascript">// <![CDATA[

$(window).load(function() {

   //init vars
   var theWindow = $(window),
   middle = $('#middlefix'),

   //footer height
   ftrH = $('#footerfix').height();

   //header height
   hdrH = $('#headerfix').height();

   function resizeMiddle() {

      //calculate 
      middleHeight = theWindow.height()-ftrH-hdrH ;

      //set
      middle.css( { height:middleHeight+'px' } );
   }


   theWindow.resize(function() {
      resizeMiddle();
   } ).trigger("resize");
} );

// ]]></__script>

</head>

</__body>

<div id="headerfix">
	<!-- PLACE YOUR OWN HEADER CONTENT HERE!!! -->
</div>

<div id="middlefix">
		<!-- PLACE YOUR OWN MIDDLE CONTENT HERE!!! -->
</div><!-- end #middlefix -->

<div id="footerfix">									
		<!-- PLACE YOUR OWN FOOTER CONTENT HERE!!! -->
</div><!-- end #footerfix -->

<__body>

</__html>

Code: Select all

#headerfix {
	width: 100%;
	height: YOUR-HEADER-CONTENT-HEIGHT;
	position: fixed;
	top: 0;
	z-index: 1000;
}
#middlefix  {
	width: 100%;
	overflow-y: scroll;
	position: relative;
	top: SAME-AS-YOUR-HEADERFIX-HEIGHT;
}
#footerfix {
	width: 100%;
	height: YOUR-FOOTER-HEIGHT;
	margin: 0;
	padding: 0;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1000;
}

Once again, velden saves the day!
I'm gonna leave this topic open for a while in case someone come up with suggestion (or suggestions, of any kind).
For now, have a nice rest of the day and may the spring finally find you, wherever you may be!
Regards,
Jakov