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

Posted by Nikita Zernov
Nikita Zernov
4,392 Points

Make header to fit screen

Hello everyone! I am wondering how to make header of height of browser window?

Tiffany McAllister
Tiffany McAllister
25,806 Points

To make an element the height of the viewport, you can use the viewport units such as vh (which stands for viewport height). For example:

header {
  height: 100vh;
}

100 indicates the percentage of the viewport height.

Kavish Kansal
Kavish Kansal
2,887 Points

Hi, you need to set the minimum height of the header to the size of the browser window

          header
                min-height:100%;

1 Answer

Stephen O'Connor
Stephen O'Connor
22,291 Points
Stephen O'Connor
Stephen O'Connor
22,291 Points

You could do this by giving your html, body and the header a height of 100% in your css file.

html,
body,
header {
    height: 100%;
}