{"id":5156,"date":"2021-07-05T02:00:00","date_gmt":"2021-07-05T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/how-to-create-websites-fullscreen-sections-html-and-css\/"},"modified":"2025-05-09T13:51:54","modified_gmt":"2025-05-09T11:51:54","slug":"how-to-create-websites-fullscreen-sections-html-and-css","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/how-to-create-websites-fullscreen-sections-html-and-css\/","title":{"rendered":"How to create a website with fullscreen sections using CSS and HTML"},"content":{"rendered":"\n

Large full-screen sections are quite a common element on nowadays websites, especially on landing pages acting as a hero slider<\/a>. They take the full height and full width of the viewport with the intent of bringing the focus in a single portion of the page. Here we will be explaining how to achieve just that.<\/p>\n\n\n

Defining our sections in HTML<\/h2>\n\n\n

Let\u2019s start by adding a couple of section elements inside a the <main><\/code> wrapper:<\/p>\n\n\n

    <main<\/span>><\/span>\n      <section<\/span>><\/span>\n        <h1<\/span>><\/span>Hello!<\/h1<\/span>><\/span>\n      <\/section<\/span>><\/span>\n      <section<\/span>><\/span>\n        <h1<\/span>><\/span>Toodles~<\/h1<\/span>><\/span>\n      <\/section<\/span>><\/span>\n    <\/main<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n
Making sections become full-screen<\/h2>\n\n\n
Making sections full-height and full-width can be done in two ways:<\/p>\n\n\n\n
    \n
  • Using viewport units (vh<\/code> and vw<\/code>) – May feel the most intuitive out of the two.  In fact, the viewport units were introduced to do just these kinds of things.<\/li>\n\n\n\n
  • Using implicit units like percentages. (%<\/code>). They used to be used more in the past when viewport units were not a thing or were not widely supported.<\/li>\n<\/ul>\n\n\n
    Using viewport units<\/h2>\n\n\n
    First, we will style our sections so that they scale to the height of the viewable area. We will use the vh<\/code> unit, which stands for “viewport height”. The vh<\/code> unit is roughly 1% of the viewport’s height. And what is the “viewport”? It is the visible area of your website in the browser. To make it take 100% of the vertical space, we will set min-height<\/code> to 100vh<\/code>, meaning, the section will take a minimum height of 100% of the viewport height.<\/p>\n\n\n\n
    We set min-height<\/code> instead of height<\/code> because this way each section can, if required, have a bigger height, while if you used just height<\/code> any content that scales beyond the viewport height would be overflowing the container.<\/p>\n\n\n
    body<\/span> {\n  margin<\/span>: 0<\/span>;\n}\n\nsection<\/span> {\n  font-family<\/span>: sans-serif;\n  min-height<\/span>: 100vh<\/span>;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    It is important to note that if you intend to support legacy browsers, then you might want to use percentage units instead. Take a look at the following chart to verify if the browsers you intend to support are listed in green:<\/p>\n\n\n\n
    \"Viewport<\/figure>\n\n\n
    Using percentage units<\/h2>\n\n\n
    The main difference between the percentage unit and the viewport units is that the percentage units rely on the height and width values of the parent. This means that all the parent elements must also scale to the full height and width if the children underneath wish to. This is why the html<\/code>, body<\/code> and main<\/code> tags have height<\/code> and width<\/code> set to 100%<\/code>. This will force each parent in the hierarchy to take up the full available height and width of the viewport.<\/p>\n\n\n
    html<\/span>,\nbody<\/span> {\n  margin<\/span>: 0<\/span>;\n  height<\/span>: 100%<\/span>;\n  width<\/span>: 100%<\/span>;\n}\n\nmain<\/span> {\n  height<\/span>: 100%<\/span>;\n  width<\/span>: 100%<\/span>;\n}\n\nsection<\/span> {\n  font-family<\/span>: sans-serif;\n  height<\/span>: 100%<\/span>;\n  width<\/span>: 100%<\/span>;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n
    Centering content vertically and horizontally<\/h2>\n\n\n
    You will very probably want to have some centered content on your section. If not text or images, probably a container element.<\/p>\n\n\n\n
    We will be using the align-items<\/code> property to vertically center whatever content we have. Then, to center them horizontally we’ll be using justify-content: center<\/code>.<\/p>\n\n\n\n
    And to make those two properties work, we’ll  display: flex<\/code> in order to turn each section<\/code> into a flex container.<\/p>\n\n\n
    section<\/span> {\n  font-size<\/span>: 120px<\/span>;\n  display<\/span>: flex;\n  justify-content<\/span>: center;\n  align-items<\/span>: center;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n
    Styling sections individually<\/h2>\n\n\n
    To make each section distinguishable from the other, we will use the nth-child<\/code> selector to set a background and a color. You can achieve the same thing by using a class for each section too if you prefer so.<\/p>\n\n\n
    section<\/span>:nth-child(1)<\/span> {\n  background<\/span>: orange;\n  color<\/span>: white;\n}\n\nsection<\/span>:nth-child(2)<\/span> {\n  background<\/span>: cyan;\n  color<\/span>: white;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    With that, you should now be able to confidently create fullscreen sections with HTML and CSS. If you want to see how it looks like, take a look at the following CodePen and while you’re at it play around with it:<\/p>\n\n\n\n