Facebook Youtube Twitter Instagram Arrow Home More Menu
Full Height Container Rendering

Full Height Container

A predefined full-height intro section. You don't need to know advanced HTML or CSS. Simply replace the content in the full-height container. Section I04

Basic8 Template
Back To
Intro Sections
Optimized for the vertical height rendering

Easy to Use Predefined CSS Containers

Perfect container positioning

This section was designed in such a way to ensure an ideal vertical positioning for most scenarios in a predefined container. Your specified content, such as images or text, will be automatically placed and resized, depending on the screen.

Sturdy Design. No wonky feeling

Basic8 website template was designed with attention to details, not like other templates that break easily in a lot of scenarios. While designing Basic8 website template we did our best to create a simple and robust template.

Responsive across devices

Build with intelligent responsiveness across a multitude of devices! Basic8 template and all its sections are designed to be responsive considering both the width and the height of various viewports such as mobile, narrow, wide horizontal, vertical, or retina viewports.

Dual typography available

Any section, such as intro sections (for example full height container), could be automatically styled with one of the two available typographic themes: professional or stylish.
To learn more about it visit the style guide.

Simple! Yet, exquisite look & feel

Intentionally our sections are designed to breath space and to harmoniously manage the available vertical estate. Thus, images, text and call-to-actions fit together easy. You just need to replace the content with your own text and media.

Easy HTML5 & CSS3

You will need minimal HTML and CSS3 knowledge for figuring out how to create a full height section. Just reuse the corresponding full-height section clearly delimited in the code by HTML comments. In most scenarios you won't need to deal with CSS.

A CSS containter on a full-height page
How to fill the web page height

Use predefined full-height sections

If you want to fill the full-height of the web page viewport on various browsers and devices, you simply have to browse the predefined full-height sections, select one and customize it. 3

View more sections

Intelligent retina vertical stretching

These full-height sections were designed to stretch and to adapt intelligently to the viewport height and width, considering even wild scenarios such as huge horizontal or vertical monitor screen. Therefore, in some scenarios, height limitations take precedence over stretching fully to the height of the webpage to prevent breaking the design.

How to test this: just go to your browser and click zoom out to emulate what it will happen on a huge monitor.

Vertical Space