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 CSS Layout Techniques Positioning Schemes Absolute Positioning

Setting height to 100% doesn't work...

Hey,

At around 6:07 of the Absolute Positioning video in CSS Layout Techniques, Guil sets the height of the containing elements to 100%. I understand why the .content-row is set to 100% because it contains the 3 columns, but I don't understand why the .col and .main-wrapper is also set to 100%.

I tried making a page just like Guil did, but mine doesn't work. When I set the height of the .main-wrapper, the .content-row and the .col to 100%, everything collapses. When I set the min-height to 100%, it doesn't collapse, but then my footer doesn't go to the bottom.

I tried setting the height of the body and the html to 100% and things don't collapse, but the footer doesn't go to the bottom of the page. Not sure what to do.

Please help…Thanks.

6 Answers

Jason Mc Dermott
Jason Mc Dermott
11,496 Points

I was just having the same problem this did the job

I just put it with page styes at the top :)

html, body { height: 100%; }

rebeccacashen
rebeccacashen
4,602 Points

Thanks Jason! I was following along with Guil perfectly until I got here and it all fell apart and my footer wasn't down the bottom anymore :( So why did it work for Guil and not us I wonder?

Jason Mc Dermott
Jason Mc Dermott
11,496 Points

Good question Rebecca, looking back I think I understand whats up. If we basically think of all web coding with HTML, CSS and Javascript is like an onion, of course being many layers and further out we go represents the Hierarchy. Here it was the case of adding the property to the very page structure itself hence the very html and body. I still don't exactly know how it worked for Guil the way it did, an educated guess would be he was using a reset styling. But the core idea of what I just explained with the onion example stands, and I find a great way to keep an overview of all this and not let it get over your head. Sketching up a visual of boxes within boxes handy, kind've like a plan, a map or blueprint to help visualize what your coding. Sorry for the long winded answer

Christina Giannouli
Christina Giannouli
18,202 Points

Hey Robin,

Think about it from the inside out:

We want the three columns to take 100% of the screen's height. To do so, its parent (.content-row) must give it that space, so we need to set its height to be 100% as well. But .content-row won't be able to have a 100% of the height if its parent (.main-wrapper) wont give it that space. So, we also need to specify the full height for .main-wrapper.

As far as the second part of your post, I think you should download Guil's project files and compare them to yours. It's the best way to understand what you're doing wrong.

Once I can't see your files, I can only guess that you probably haven't set correctly the absolute and relative position for the children and parent elements? I don't know...

Hi Christina,

Thanks for your answer. Here is the code that I was talking about. It's a little long…the part where the height of the .col, the .content-row and the .main-wrapper is set to 100% is at the bottom of the media query.

I'm going to look at Guil's code…I hadn't thought of that. Great idea.

/********************
BLOCKS OF CONTENT
********************/


.primary-content{
  background:rgba(60, 100, 160, 1);
  color:white;

}

.secondary-content{
  background:rgba(100, 100, 50, 1);
  color:white;

}

.extra-content{
  background:rgba(100, 50, 100, 1);
  color:white;

}

.main-footer{
  background:rgba(100, 100, 100, 1);
  color:white;
  padding:25px;
  box-sizing:border-box;


}

.main-header{
  background:rgba(100, 200, 255, 1);
  color:white;
  padding:25px;
  box-sizing:border-box;
}

/********************
NAVIGATION
********************/

.main-nav{
  padding:0;

}


.main-nav li{
  list-style-type:none;
  background:rgba(150, 150, 150, 1);
  padding:10px;
  margin:5px 0;
  text-align:center;



}

/********************
LOGO
********************/

.main-logo{
  background:rgba(100, 100, 100, 1);
  color:white;
  width:200px;
  text-align:center;
  margin:0 auto;
  padding:10px;

}

/********************
BODY AND HTML SO THAT
THINGS DON'T COLLAPSE
********************/

body{
  height:100%;

}

html{
  height:100%;

}

/********************
APPLY TO ALL COLUMNS
********************/

.col{
  padding:25px;
  box-sizing:border-box;

}

/********************
MEDIA QUERY FOR 
LARGER SCREENS
********************/

@media screen and (min-width:768px){

.content-row{
    position:relative;


}

.col{
    position:absolute;
    width:30%;

}

.primary-content{
    width:40%;
    left:0;

}

.secondary-content{
    left:40%;

}
.extra-content{
    right:0;

}

.content-row, .main-wrapper, .col{
    height:100%;

  }








}

The problem lies in the downloaded code. It doesn't match the video.

Oops...

Michael Marvick
Michael Marvick
4,805 Points

Oh no.. now I'm having the same problem. What did you do??

Michael Marvick
Michael Marvick
4,805 Points

For me, setting the html and body height to 100% (outside of the media queries) fixed the issue.

In a previous video we added the following to the page styles.

html,
body { 
    height: 100%; 
}

If you downloaded the project files with the video this section was removed. Just re-add and you will be good to go.

rebeccacashen
rebeccacashen
4,602 Points

They really need to be added back into the download files. Spent wasted time trying to fix something I didnt break :(

Hopefully the downloaded code matches the video in future updates of this course.

So far still doing this ... the download code hasn't been updated despite the issue listed here. Would be nice if it were updated, please.