From the course: CSS Essential Training

Unlock this course with a free trial

Join today to access over 25,600 courses taught by industry experts.

Creating full-height layouts

Creating full-height layouts

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Creating full-height layouts

“

- [Narrator] A common design for websites is setting an element to be relative to the height of the browser viewport. Om the final project, The header spans 100% of the viewport height, even when resized. To create this style, the height must be defined for both the HTML and body elements before sizing the child elements. Let's look at an example. CodePen is designed for experiments and testing, so it integrates required HTML tags, like HTML and body into the tool. When you create a new pen, you don't need to add these tags, but they are still included, which means we can apply CSS styles to them. Let's start by taking a look at how height is applied to these elements by default. Right now, we have a div with a border and some padding styles. This is the element we want to size, relative to the viewport. I've also added the CSS for the box sizing property. So the border and padding styles won't affect the overall…

Contents