Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to stretch elements to fit the whole height of the browser window with CSS?
To stretch the elements to fit the whole height of the web browser window, use the height property and set it to 100%. The same height:100% is also set for the entire web page. Let us see how to stretch elements to fit the whole height of the browser window.
Set the container
We will set a <div>. This will stretch to the whole height and width of the web browser window −
<div class="fullHeight">This div element will stretch to the whole height and width of the window</div>
Height of the HTML document
The web page is set with height 100% using the height property −
html, body {
height: 100%;
margin: 0;
}
Height of the container
The container div is also set with height 100%. This is the element that will be stretched to fit the whole height of the window because the document is also set with height 100% −
.fullHeight{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
height: 100%;
background: rgb(135, 27, 207);
color:white;
font-size: 40px;
padding: 40px;
}
Example
To stretch elements to fit the whole height of the browser window with CSS, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
*{
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
}
.fullHeight{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
height: 100%;
background: rgb(135, 27, 207);
color:white;
font-size: 40px;
padding: 40px;
}
</style>
</head>
<body>
<div class="fullHeight">This div element will stretch to the whole height and width of the window</div>
</body>
</html>
Updated on: 21-Dec-2023
691 Views
Advertisements