Jump to content


Photo

css


  • Please log in to reply
10 replies to this topic

#1 derek.sullivan

derek.sullivan

    Jedi In Training

  • Members
  • PipPip
  • 343 posts
  • Gender:Male
  • Location:Georgia
  • Interests:preaching, programming, music, friends, outdoors, moves, books

Posted 10 February 2011 - 01:24 PM

I want my content box to fit the page from top to bottom. What I mean is I want the top of the box to touch the top margin and so with the bottom of the box.. an example is http://dsullweb.net/...late/index.html It fits the top, not the bottom... Would max-height: 100% work? Guess it's worth a shot!

#2 derek.sullivan

derek.sullivan

    Jedi In Training

  • Members
  • PipPip
  • 343 posts
  • Gender:Male
  • Location:Georgia
  • Interests:preaching, programming, music, friends, outdoors, moves, books

Posted 10 February 2011 - 01:29 PM

Well, in FF I've matched it to fit it exactly with just finding the right pixel.. But of course in IE it overflows the page and right now seeing as how I have no content to make it overflow, it's doing what I don't want it to do lol! So any suggestions would be great!

#3 rc69

rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 10 February 2011 - 07:10 PM

All i see at the link you provided is a white box with a blue background. Is there supposed to be something else? It also looks the same in IE7/8 and FF to me. A screenshot of actual vs. expected results would be helpful.

#4 derek.sullivan

derek.sullivan

    Jedi In Training

  • Members
  • PipPip
  • 343 posts
  • Gender:Male
  • Location:Georgia
  • Interests:preaching, programming, music, friends, outdoors, moves, books

Posted 10 February 2011 - 09:21 PM

No, the white box is what I was referring to. I have IE8, and it looks different. Honestly, it's not a huge deal because either way it will overflow BUT I'd rather have it not overflow IF there is no content in the white box.
I also think it has to do with my browser+screen. My parents are hard-at-seeing so their IE is bigger than normal size (I downloaded FF for personal use so they haven't messed with it!)

#5 rc69

rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 10 February 2011 - 11:58 PM

Well, i'm curious as to what the problem is. If it is just the zoom setting, and you have IE8, you can test a fix by changing the zoom back to 100% in the bottom-right corner. If that doesn't work, and you have the most up-to-date code on the link you gave, then post some screenshots anyway :)

If it's really something you don't want to worry about then i think i can let it go. But until then, i'm still curious :)

#6 derek.sullivan

derek.sullivan

    Jedi In Training

  • Members
  • PipPip
  • 343 posts
  • Gender:Male
  • Location:Georgia
  • Interests:preaching, programming, music, friends, outdoors, moves, books

Posted 11 February 2011 - 11:48 AM

You will notice in the FF image that there is no scroll bar, in the IE8 image there is.

Attached File  ff4dd.JPG   49.76KB   9 downloadsAttached File  ie8dd.JPG   88.87KB   9 downloads

#7 derek.sullivan

derek.sullivan

    Jedi In Training

  • Members
  • PipPip
  • 343 posts
  • Gender:Male
  • Location:Georgia
  • Interests:preaching, programming, music, friends, outdoors, moves, books

Posted 11 February 2011 - 02:30 PM

Thanks for pointing that out. Only question to your comment is does it matter IF there are a million toolbars? I want it AUTOMATICALLY FIT THE PAGE. However many toolbars I have should not affect any automatic alignment. And no, I do not have a million toolbars thank you sir.

#8 rc69

rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 11 February 2011 - 07:24 PM

Ahh, i see what the problem is now. My monitor is a bit bigger than yours so the height of the box wasn't enough to fill my screen anyway. Did you intend for it to have a max-height, or did you want it to fit top-to-bottom regardless?

Now the link you provided is giving a 404, so there's not much i can do atm. However, i would recommend googling css height 100%. You'll find plenty of articles on the ins-and-outs of why it's a hard effect to achieve.

#9 derek.sullivan

derek.sullivan

    Jedi In Training

  • Members
  • PipPip
  • 343 posts
  • Gender:Male
  • Location:Georgia
  • Interests:preaching, programming, music, friends, outdoors, moves, books

Posted 12 February 2011 - 08:30 PM

Topic resolved. For those of you who are curious about this, I'll post the css to help you do this.

html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#yourdivtag {
margin: auto;
padding: 0;
height: 100%;
}

Works!

#10 rc69

rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 13 February 2011 - 01:41 PM

Yep, that looks about right to me. But for future reference, be careful when you start adding borders/margin/padding to either of those three selectors. It doesn't work like you think it does and i've yet to find a general solution to the problem. Each time i run into the issue i come up with a different fix <_<

#11 derek.sullivan

derek.sullivan

    Jedi In Training

  • Members
  • PipPip
  • 343 posts
  • Gender:Male
  • Location:Georgia
  • Interests:preaching, programming, music, friends, outdoors, moves, books

Posted 13 February 2011 - 02:32 PM

Yeah I had to be careful definitely but it does work for my template. Also I changed it from a .html to a .php for the example page I showed you. Sorry


Yep, that looks about right to me. But for future reference, be careful when you start adding borders/margin/padding to either of those three selectors. It doesn't work like you think it does and i've yet to find a general solution to the problem. Each time i run into the issue i come up with a different fix <_<






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users