Jump to content
Stef's Coding Community
Sign in to follow this  
htwingnut

Help with CSS fixed header, fixed footer, 100% height content

Recommended Posts





Image



Image

Image


All main content here.


No need for a height if you want height to be flexible. No width so that it moves up between floated

divs.


Background-colors can be temporary just to identify size of divs.


Remember that the total size of an element is the basic size plus margins, padding and borders.


All main content here.


No need for a height if you want height to be flexible. No width so that it moves up between floated

divs.


Background-colors can be temporary just to identify size of divs.


Remember that the total size of an element is the basic size plus margins, padding and borders.


All main content here.


No need for a height if you want height to be flexible. No width so that it moves up between floated

divs.


Background-colors can be temporary just to identify size of divs.


Remember that the total size of an element is the basic size plus margins, padding and borders.





Image




Edited by htwingnut

Share this post


Link to post
Share on other sites

My original code was not designed for fixed header and footer, and you have added height: 100% in too many places.

 

This code is only a partial solution as I haven't had much time.

http://www.wickham43.supanet.com/forumposts/htwingnut090417.html

 

You may need to look at items 17a or 19 here to drag down side column backgrounds:-

http://www.wickham43.net/firefoxbackground.php

and this is an example for fixed header and footer, it involves hacks but does work on all browsers that I have tried:-

http://www.wickham43.net/headerfooterfixexample.php

Share this post


Link to post
Share on other sites

Yeah, I realized I needed height: 100% only in body and wrapper to achieve desired effect. Will try your two options you suggested and see how it works.

 

So far I have tried multiple things, and no luck.

 

Am I really asking too much? It seems like this should be something that would be somewhat common, but I haven't found any examples anywhere that are like this. Closest one is the "456 Berea Street" example, but if you look, the CSS frame only goes down as far as the content. If you remove the content text, you will see what I mean.

 

I was able to get the left side to work with a position: fixed:

 

.left { position: fixed;
 width: 100px; 
 background-image: url('Images/gray100x125.jpg'); 
 background-repeat: repeat; 
 background-attachment: fixed; }

 

But how do I get the same thing fixed to the right of the "#center" div? I can't figure that one out.

Edited by htwingnut

Share this post


Link to post
Share on other sites

Ok, I have something that works, but it's not pretty.

 

I ended up ditching the .left and .right class divs and replaced it with a .background div that included a repeating background the width of the content div. The drawback here is that I have to use this graphic as my background color otherwise I have the same issue with my div background color as I did with the .left and .right.

 

It's not pretty, but it works for the time being. I appreciate any help anyone can continue to offer though to continue down the path that Wickham had started to lead me down, as I know it's the cleanest way.

 

I still haven't figured out why the text at the bottom is still hidden behind the footer, and can't get any margin or padding statement to fix it. I can use a

 

at the bottom of the page to manually scroll it up. It's not right, but it works.

 

See where it's at here:

 

http://www.bourdeaux.net/temp/csstest2.htm

Edited by htwingnut

Share this post


Link to post
Share on other sites

Oh crap. Nevermind. The only reason this worked is because I used a transparent gif with the middle section transparent.

 

As soon as I assign a background color to the .background, it covered my text. That seems odd since it is supposed to be a "background" color. I even added z-index to each div, and that didn't help either.

 

I'm stuck stuck stuck stuck stuck! ARRRRRGGGHHH!

Share this post


Link to post
Share on other sites

Great, thanks!

 

Problem I see is that the scroll bar is hidden by the header and footer. Is there a way to correct that?

 

Also, I think this works for 100% width, not sure about fixed width. I especially need fixed width left and right.

Edited by htwingnut

Share this post


Link to post
Share on other sites

YAY! I think I finally got it working properly. Funny thing is it exhibits strange behavior in IE, but if I refresh, everything seems ok.

 

Visit here if you want see it. CSS is in the HTML.

 

http://www.bourdeaux.net/temp/csstest_nb2a.htm

 

Many thanks to this site:

 

http://bonrouge.com/3c-hf-fixed.php

Edited by htwingnut

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...