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!

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

Laura Hill
Laura Hill
13,674 Points
Posted by Laura Hill
Laura Hill
13,674 Points

.col class set to 100% height (along with html, body, and .main-wrapper) and it works, but ...

page gets too long, footer is off the screen, and a scroll bar appears. Why so much white space under the small amount of content in my columns, how can I make the height of the columns respond to the amount of content contained inside?

2 Answers

Andres Altuve
Andres Altuve
16,274 Points
Andres Altuve
Andres Altuve
16,274 Points

Hi Laura, if you could provide the HTML and css would be easier to help you. To make the height of the column to respond to the amount of the content use :

Use your class or id, in the example I used a random class named .yourcolumn.

<style>
           .yourcolumn {height:auto;}

</style>
            ```
Daniel Bardaji Torres
Daniel Bardaji Torres
15,266 Points
Daniel Bardaji Torres
Daniel Bardaji Torres
15,266 Points

If you are trying to do a sticky footer keep in mind that you should have a wrapper in your content with min-height / height: 100% and also in your footer a absolute height.

If you can show some of your code, we will try to help you for sure :D