Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Marc Harrod
Marc Harrod
1,802 Points

How can i make this div stretch to the bottom.

Hi guys please take a look at a site i'm working on:

http://thirtyfive.hk/kazahana/

basically I have used a background slider from code drop and have started building over the top of it. the about div under the navigation i need to stretch to the bottom of the window but I just cannot work out how to do it?

any help advise or tips would be great if I have done anything crazy wrong I'd love to know too I still have a lot to learn.

9 Answers

Tamur Farrokhnia
Tamur Farrokhnia
27,197 Points

After much tinkering, I think I have a potential solution!

Use absolute positioning to artificially define the height of your about section.

so...

.about {
    position: absolute;
    bottom: 0;
    top: 350px;
}

By using this method, you set that the bottom of your "about" section will always be 0 distance from the bottom of the page, stretching it all the way to the bottom. Then, you set that the top of the div will always start 350 pixels from the top of the page, which is the height of your navigation. You don't even need to define a height, and the size of the div will scale dynamically as you adjust the height of the browser, keeping your scrollbar intact!

Marc Harrod
Marc Harrod
1,802 Points

This works perfectly thanks so much, I was about ready to use jquery i'm so glad it could be avoided. :)

nice site you have! i wolud like to go there! i saw that you if you comment out the height:400px; on the .about-block at line 76 custom.css the textblock goes all the way to the bottom. may be that will help?

Marc Harrod
Marc Harrod
1,802 Points

Hi Thanks, The problem is that it if I delete that height tag the content will stretch passed the bottom of the browser I need it to go to the bottom and if there is too much text then I would like the scroll bar to appear.

ah I understand, may be you can set the heigt:640px on the .abouttext at line 86? may be you should use a relative unit like em or procent because it might be a problem with pixles on smaller devices. or really big ones. at my screen 620px works perfect but on your screen another is better.

Marc Harrod
Marc Harrod
1,802 Points

I'm sorry if i'm not being clear it cannot be a fixed number i need the bottom of that div to be attached to the bottom of the window something like how a sticky footer would work.

may be you can use %? or you can fix it with a bit of javascript or jquery?

Marc Harrod
Marc Harrod
1,802 Points

I think its a problem with the code of the css background slider that is effecting it and % do not seem to be working. I have no experience with JS or Jquery really yet so I guess I will need to as a colleague to bug fix this. I was hoping I could try to do it my self but keep hitting walls.

You may want to avoid fixing with javascript if possible to avoid any unflattering layouts if the user has js turned off :)

Can you explain a little more info?

To stretch everything out, I changed the body overflow to x-scroll (as opposed to none) and the about div height to 100%. Not what you were going for?

Marc Harrod
Marc Harrod
1,802 Points

Its close but not quite right.. I dont want the whole page to scroll... I want the about div to scroll (i want it to stretch to the edge of the browser) if it needs to but the body cannot scroll it must be contained inside the visible window. if that makes sense.

Marc Harrod
Marc Harrod
1,802 Points

Sorry also you will notice... I have no idea why but where you changed the .about to 100% try changing it so something like 50% it has no effect for some reason % are not working.

Make sure to add a closing </ul> tag to your nav if you haven't done so already ;)

For a more semantic mark up, you may want to combine your .abouttext and .about divs into one.

Children elements will take up a % of their parent element. So if you take a look at .container, changing the min-height:100% simply to height:100%, the height percentages become responsive.

Then I changed nav and about divs to 50% each..

How close are we now :p It needs a bit of tidying and maybe the addition of some min-widths on the nav.

I don't know how it would work without the internal .abouttext div, but having .abouttext height as 100% will for some reason cut some of the text off. Using a fixed pixel height resolves this for me.