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

Jeff Bell
Jeff Bell
15,183 Points
Posted by Jeff Bell
Jeff Bell
15,183 Points

Page border

I'm trying to add a full page border to my website that is responsive to changes in the size of the browser. I'm particularly having trouble getting the bottom border to stick. Any suggestions?

rydavim
rydavim
18,811 Points
rydavim
rydavim
18,811 Points

If you could post your code or a workspace snapshot that will help. I'm not sure exactly what you mean or how you would like it to look in the end, so seeing your site will give me a better idea of what to suggest.

2 Answers

Steven Parker
Steven Parker
225,726 Points
Steven Parker
Steven Parker
225,726 Points

Are you applying a border to your body element? By default, it will only be as high as needed to enclose the contents.

But you can expand it to fill the window this way:

body {
  margin: 0;
  height: 100vh;
  box-sizing: border-box;
}
Jeff Bell
Jeff Bell
15,183 Points
Jeff Bell
Jeff Bell
15,183 Points

Thank you, Steven. I had forgotten about vh. I found this solution online after I posted:

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: black;
    color: white;
    cursor: pointer;
}

html, body {
    height: 100%;
}

#container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: solid gray 15px;
}

and it worked for me. Yours is much simpler and more elegant, however.