How to Create Full Page Tabs, that Covers the Entire Browser Window, with CSS and JavaScript
Tabs
How To, for Web Applications
By: Chrysanthus Date Published: 19 Mar 2025
In this scheme, there is a top horizontal menu bar that goes from the left end of the screen to the right end. The bar consists of tabs. The tabs are rectangular HTML buttons that are of the same length. In fact, there is no gap between any two consecutive tabs. When a tab is clicked, its corresponding HTML div element section is displayed under the tabs bar. Any space below the newly displayed div section is of HTML. After that clicking, the background color of the tab becomes the background color of the corresponding div section, under that tabs bar; and also becomes the background color of any HTML space down below. There is no border line separating the tab clicked and the rest of the webpage below. That is, the background color of the tab blends with that of the rest of the screen below the tab. Each tab and the rest of its screen below, may together be of different color to the other tabs and rest of their screens. This tutorial explains How to Create Full Page Tabs, that Covers the Entire Browser Window, with CSS and JavaScript.
At the end of this tutorial, there is the complete webpage code. The reader should copy the complete code into a text editor. Save the file with any name, but having the extension, .html . Open the saved file in the browser. Then click the different tabs to appreciate the look and feel of the design. The reader is advised to do that before continuing to read the rest of this tutorial.
The Webpage Skeleton Code
The skeleton code for the webpage, to which more useful code will be added is:
<!DOCTYPE html>
<html>
<head>
<title>Full Page Tabs</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
Any modern professional webpage should have at least the first four tags in the HTML head element above. The HTML style element will have a lot of code. There will be some JavaScript in the HTML script element. Each tab is an HTML button. The HTML button is an inline element by default. This means that when typed next to one another, they will appear in one horizontal line. The tabs are not within an HTML div element. They are just typed next to one another, just below the start tag of the HTML body element. However, they are given the same class attribute value. That is, they are connected by a common style. Each section that will come under the tabs bar, corresponding to the tab that is clicked, is a div element. If the height of the div section is short, the rest of the screen below, is for the HTML element.
The HTML Body Content
The content of the body element is:
<button class="tablink" onclick="openPage('Home', this, 'green')" id="defaultOpen">Home</button>
<button class="tablink" onclick="openPage('News', this, 'red')">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">About</button>
<div id="Home" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is.</p>
</div>
<div id="News" class="tabcontent">
<h3>News</h3>
<p>Some news this fine day!</p>
</div>
<div id="Contact" class="tabcontent">
<h3>Contact</h3>
<p>Get in touch, or swing by for a cup of coffee.</p>
</div>
<div id="About" class="tabcontent">
<h3>About</h3>
<p>Who we are and what we do.</p>
</div>
<script type="text/javascript">
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
The buttons that are tabs, are not within an HTML div element. They are just typed next to one another, just below the start tag of the HTML body element. However, they are given the same class attribute value. That is, they are connected by a common style, which is the "tablink" CSS rule.
The div elements are the different sections, and each corresponds to a particular tab. They all have the same class attribute value, "tabcontent" for common styling. However, in this situation, the background color of each of the styling, is not included in the common styling.
Now, when a tab is clicked, its div's section comes under the tabs bar, having the same background color as the background color of the tab. However, which is the first tab and which is the corresponding first div section, when the website loads? The JavaScript element at the bottom of the body element, simulates a click for the first tab and first corresponding section, chosen by the web developer (designer/programmer).
The Style Element
The buttons for the tabs are connected by the CSS rule, "tablink" and the divs for the sections are connected by the CSS rule, "tabcontent" . CSS rules are defined in the style element. Remember, a CSS rule name (selector) has the value of a class attribute of an HTML element.
The box-sizing Property
At the top within the style element content, is the CSS rule,
* {box-sizing: border-box}
This is called the box-sizing property. The asterisk, * in front of the rule, means that it is applied to all the containers, such as the button elements and the div elements. The box-sizing property means that the width of each element is measured from the left edge of the border to the right edge of the opposite border, instead of from the left edge of the element's content to the right edge of the element's content. The box-sizing property also means that the height of each element is measured from the top edge of the border to the bottom edge of the opposite border, instead of from the top edge of the element's content to the bottom edge of the element's content. The box-sizing property makes coding convenient for projects like this one.
The html, body CSS Rule
If the body element portion (space) does not reach the button of the screen, the rest of the portion below the body portion is of the HTML element itself. The CSS rule for the HTML and Body is:
html, body {
height: 100%;
margin: 0;
font-family: Arial;
}
The height for both HTML and body has to be made 100%, otherwise some browsers will not handle the scheme correctly. The four margins surrounding the body element is 0. The font for the body element is Arial.
Style Common to All Tab Buttons
The class attribute for all the tab buttons is "class='tablink'" . So the main part of the selector identifier for the CSS rule for the styles common to all tab buttons, is tablink. The CSS rule for styles common to all tab buttons is:
/* Style tab links */
button.tablink {
background-color: #555;
color: white;
font-size: 17px;
padding: 14px 16px;
border: none;
width: 25%;
float: left;
cursor: pointer;
}
The background color for each button (tab) is #555 (grayish). This is the color when the button has not been clicked. When a button is clicked, its background color and the background color its corresponding div section becomes the same; see below. The text content color for each button is white. The font size of each character of the text is 17px. The top and bottom paddings for each button is 14px and the left and right paddings for each button is 16px. None of the buttons has a border.
There are four button tabs. The width of each of these buttons is 25%. Since there is no button border, and because of the box-sizing property "box-sizing: border-box", the 25% width of the button is measured from the left edge of the padding, to the right edge of the padding. The browser will give these button tabs, zero margin.
All the button tabs are floated left, so that they should all appear in one horizontal line. This means that the total width (sum of tab widths) of the tabs, from left to right without any expansion, determines the smallest screen width for the webpage. With bigger screen widths, each button tab expands to maintain its 25% (1/4) share of the total width. With the "float: left;" property, there is no wrapping of the button tabs on the right of the line, to the next line below.
"cursor: pointer;" means that when the mouse pointer goes over a button tab, it should become a hand. It is fashionable to have the hand today, than to allow it as the pointer, as it was in the past.
The Different Colors for the Different div Sections
There are four tabs (buttons) and correspondingly four div sections for document contents. In the Style element, the different colors are given as follows:
#Home {background-color: green;}
#News {background-color: red;}
#Contact {background-color: blue;}
#About {background-color: orange;}
These are actually four CSS rules, where each one is identified with the ID value of the HTML div section element in the HTML body. Each selector here, has to begin with # . The rules here have only the different background colors. The other styles common to all four sections are given in a separate single CSS rule.
CSS Rule Common to all div Sections
The CSS rule common to all div sections is:
/* Style the tab content (and add height:100% for full page content) */
div.tabcontent {
color: white;
padding: 100px 20px;
border: none;
height: 100%;
display: none;
}
The selector begins with div because all the sections are div elements. That is followed by a dot. The dot is followed by the class-name common to all the four divs. Remember that the class-name is the value of the class attribute in an HTML element in the HTML body.
The color of text for each of the div sections is white. The top and bottom paddings for each of the div sections is 100px. The right and left paddings for each of the div sections is 20px. There is no border for each of the div sections.
The height is 100% of the HTML body element. The HTML body element may not go from top to bottom of the screen, and may not end at the bottom of the screen.
Because of the box-sizing property, the height of each div section is measured from the top edge of the padding to the bottom edge of the padding.
The display is none. So all the div section elements are not displayed, when the webpage loads (for the first time). When the webpage loads, the tab that is highlighted and the corresponding div section that is made visible (with "display: block;"), was decided upon by the programmer, with the JavaScript code at the bottom of the HTML body.
Remember that there is no border for the tabs and no border for the div section elements. And with the box-sizing property, the background color of the tab clicked, is the same and blends continuously with the background color of the corresponding div section. Both background colors have to be the same and that is determined by JavaScript; see below.
Tab On-hover
The CSS rule for this is:
button.tablink:hover {
background-color: #777;
}
When the mouse pointer goes over the tab, the background color of the tab becomes #777. This is gray that is lighter than the background color, #555 of the tab, when the mouse pointer is not over the tab.
JavaScript
There are two scripts for JavaScript in the webpage. There is one in the HTML head element and there is another at the bottom, within the HTML body element. The one in the head element is:
<script type="text/javascript">
function openPage(pageName, elmnt, color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
</script>
There are three operations here. The first operation hides all div section elements by giving each the display property value of none (should be in double quotes here). This happens for a very short time that is not noticeable by the user. The second operation gives no background color (therefore black) to all the tabs. This happens for a very short time that is not noticeable by the user.
Each tab element in the body element has an on-click event, such as (onclick="openPage('Home', this, 'green')") . When a button (tab) is clicked, it calls the openPage() function above, with three arguments. The first argument is the ID for the div section to be displayed. The second argument, this, refers to the tab that was clicked by the user. The third argument is the background color of a div section corresponding to the tab clicked. With all that, the last operation of the function above, displays the intended div section, and gives the background color of the tab clicked, the same background color of the div section displayed. The above three operations happen very fast, and the result of the last operation remains.
The script at the bottom of the body element (and within its tags) is:
<script type="text/javascript">
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
Now, the DOM reference object for an HTML element has the click() method. When called, this method simulates the actual user clicking; though the user does not click. When the click is simulated, the above function is called, and the first button tab and first div section chosen by the programmer, are highlighted and displayed respectively.
When the webpage is loaded (for the first time) after all the HTML elements in the body element have been established, this one statement JavaScript, is evaluated (executed). The one statement cannot instead be, in the JavaScript in the head element, because the script there is evaluated (executed) the first time (not called) as the page loads, before the HTML elements in the body element are established. As a web page loads, all JavaScript, whether in the head element or in the body element, are evaluated (executed) as they are encountered. So the statement cannot be in the script in the head element.
The Complete Webpage Code
And there you have it. The complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Full Page Tabs</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
* {box-sizing: border-box}
/* Set height of body and the document to 100% */
html, body {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Style tab links */
button.tablink {
background-color: #555;
color: white;
font-size: 17px;
padding: 14px 16px;
border: none;
width: 25%;
float: left;
cursor: pointer;
}
#Home {background-color: green;}
#News {background-color: red;}
#Contact {background-color: blue;}
#About {background-color: orange;}
/* Style the tab content (and add height:100% for full page content) */
div.tabcontent {
color: white;
padding: 100px 20px;
border: none;
height: 100%;
display: none;
}
button.tablink:hover {
background-color: #777;
}
</style>
<script type="text/javascript">
function openPage(pageName, elmnt, color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
</script>
</head>
<body>
<button class="tablink" onclick="openPage('Home', this, 'green')" id="defaultOpen">Home</button>
<button class="tablink" onclick="openPage('News', this, 'red')">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">About</button>
<div id="Home" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is.</p>
</div>
<div id="News" class="tabcontent">
<h3>News</h3>
<p>Some news this fine day!</p>
</div>
<div id="Contact" class="tabcontent">
<h3>Contact</h3>
<p>Get in touch, or swing by for a cup of coffee.</p>
</div>
<div id="About" class="tabcontent">
<h3>About</h3>
<p>Who we are and what we do.</p>
</div>
<script type="text/javascript">
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
The reader should copy the complete code into a text editor. Save the file with any name, but having the extension, .html . Open the saved file in the browser. Then click the different tabs to appreciate the look and feel of the design.
Chrys
Related Links:
More Related Links:
Cousins
Menus
How to Create a Menu Icon with HTML and CSS and without using a LibraryHow To Create a Top Navigation Bar
How to Create Fixed Auto Height Sidebar Menu with CSS
How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
How to Create a Search Menu to Filter List Items, using CSS and JavaScript
How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
How to Create a Top Fixed Horizontal Menu with CSS
How to Create a Vertical Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
How to Create a Slide Down Full Screen Curtain Navigation Menu
How To Create a Responsive Collapsible Sidebar Menu
Images
Coming soon . . .Buttons
Coming soon . . .Forms
Coming soon . . .Filters
Coming soon . . .Tables
Coming soon . . .BACK NEXT