CSS 100%

  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

How do you make something cover an entire page, like not just the visable parts, but all of it. I'm trying to do two thing, the first is having a black strip run the entire length of the page.

For the second I'm trying to make a light box effect (page darkens). However, when I add the dark layer and when I scroll down it does not cover the rest of the page.

100% doesn't work, so I was wondering how you do this.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

I've always found vertical sizing and positioning to be a tough thing to pull off. If all you want is a black stripe going down the whole length of the page, you could always just use an image that's sized plenty tall, like 50x2000 or something.
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6252
  • Loc: Seattle, WA

Post 3+ Months Ago

SpooF, are you willing to use any Javascript to achieve the height? If so, let me know and I'll post a potential solution.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

50x2000 will scale the page to be 2000px long, which I'm not sure he's wanting. He wants to have content fill the screen when the content doesn't cause the boxes of the CSS positioning to fill it automatically. Have you tried a bottom padding on your generally shortest page?
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

neksus wrote:
50x2000 will scale the page to be 2000px long, which I'm not sure he's wanting. He wants to have content fill the screen when the content doesn't cause the boxes of the CSS positioning to fill it automatically. Have you tried a bottom padding on your generally shortest page?

Sorry, I should have specified that I meant to use the 50x2000 image as a background image. I mean it's hard to say without seeing exactly what he's trying to do, but that way it would always extend to the bottom, regardless of the content.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

I know the problem he's talking about, I'm just not sure how else to word it.

I guess, well, a background image that fills the screen can't make a footer sit at the bottom of the page ;)
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

spork wrote:
SpooF, are you willing to use any Javascript to achieve the height? If so, let me know and I'll post a potential solution.


I'm thinking if there's a lightbox effect happening, JS is going to be available. :D
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

Ya, I can use javascript for it.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

neksus wrote:
I guess, well, a background image that fills the screen can't make a footer sit at the bottom of the page ;)

I'm not sure why the black strip would need to affect the footer. Shouldn't the content be the thing that determines where the footer goes?

My point is, for something purely aesthetic like this why not put it where it belongs- in the style sheet. Adding extra JavaScript seems kind of unnecessary to me.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

jameson5555 wrote:
I'm not sure why the black strip would need to affect the footer. Shouldn't the content be the thing that determines where the footer goes?


He wants the footer at the bottom of the screen - the content isn't bountiful enough to cause the footer to sit there :)
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

Well the thing that is really weird me out, and this might end up being the fix to the problem. I have a div that contains almost all of my page, thats what i set the background to black in. The weird part is that things inside of that div will stick out the bottom. I thought that the container div would stretch, but it doesn't.

I have a feeling its because I'm using a float, and anything that is floating will not interact with the container div, even if its inside of it.

To see what Im talking about you can go here http://webturnover.com/articles/topic6

I'm still working out the kinks, in IE7 it all works, except it display horribly. In FF it displays the layout correctly but I run into the background problem, and in Opera I have no idea whats going on, it worked a bit ago.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Easy fix? Float the div, too :)
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Oh.. I see what you mean now and you're right- it's because the divs that are floated are taken out of the layout, so your sub_left div is the only one stretching the container vertically. If there's an easy JavaScript solution that would be cool. Otherwise, you could set a fixed height and put a scroll on #sub_left or something like that.
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

That worked, I guess I wont center it lol
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

I can't remember how I came across it but I always remembered it lol

You could try making a container div too which encases the entire site and center that - it should get you centered again.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

So, you got it fixed now?

Post Information

  • Total Posts in this topic: 16 posts
  • Users browsing this forum: No registered users and 45 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.