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
Marc Harrod
1,802 PointsHow 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
27,197 PointsAfter 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!
Ida Brogie
9,250 Pointsnice 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
1,802 PointsHi 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.
Ida Brogie
9,250 Pointsah 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
1,802 PointsI'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.
Ida Brogie
9,250 Pointsmay be you can use %? or you can fix it with a bit of javascript or jquery?
Marc Harrod
1,802 PointsI 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.
thomascawthorn
22,986 PointsYou 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
1,802 PointsIts 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
1,802 PointsSorry 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.
thomascawthorn
22,986 PointsMake 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.
thomascawthorn
22,986 PointsI 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.
Marc Harrod
1,802 PointsMarc Harrod
1,802 PointsThis works perfectly thanks so much, I was about ready to use jquery i'm so glad it could be avoided. :)