100% Height

  • Resolved lunddesign

    (@lunddesign)


    15 years, 1 month ago

    Hi everyone. I need some help with my design.

    I used Starkers Blank Theme so that I could make my own design from the start and it worked out pretty good. But there’s some problem with my CSS I’ve heard. I don’t know why, but to have a 100% height at my site I need to use stuff like this code at my sidebar div and at the main content div:

    height:100%;
    min-height:100%;
    margin-bottom:-5000px;
    padding-bottom:5000px;

    This code works perfect at almost every page at my site. The problem is the comment and read more links at my blogpage where I just got the summary’s of the articles I’m writing. When I click one those two links my design gets all messed up. I’ve heard it’s because of that code, but then I need some other way to make the 100% height thing. Any ideas anyone?

    This is how I want my site to look like:

    —–Header—–
    -MainCo-Sidebar-
    -MainCo-Sidebar-
    -MainCo-Sidebar-
    -MainCo-Sidebar-
    -MainCo-Sidebar-
    —–Footer—–

    No matter how long down the main content goes, or the sidebar goes, I want both of them to go down all the way to the footer.

Viewing 3 replies - 1 through 3 (of 3 total)

  • The following should work:

    Remove the styling you posted above.
    Add a wrapper in which you will place the content, sidebar and footer divs.
    Add overflow:hidden to the wrapper div.
    Float the content div to the left.
    Float the sidebar div to the right.
    You may want the two items above on the opposite sides.
    Add clear:both to the footer div.

    Thread Starter lunddesign

    (@lunddesign)

    Thanks a lot! But that just pushes my footer down to bottom. I still want my sidebar (which is shorter than the main content) to go all the way down to the footer with one background colour. Now the colour wont repeat, but just be where I have some text at the sidebar…

    Thread Starter lunddesign

    (@lunddesign)

    I figured it out! If you just take a wrap around the content divs (main-content and sidebar) and put a picture which is as wide as those two together within that wrap and repeats it y it works perfectly! Put be sure you make it float if your main-content and sidebar floats.

    Thanks for the help! ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘100% Height’ is closed to new replies.