- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 make the main content div fill height of screen with CSS and HTML
The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).
In the below-given example, no height is specified in percentage and no jQuery is needed
.mainbody{
position: absolute;//here we are setting the position of an element as absolute
top: 30px; /* here we are defining Header Height to 30 px */
bottom: 10px; /*here we are defining Footer Height to 10 px */
width: 100%;// here we are setting the width to 100%
}
Updated on 04-Mar-2020 06:31:24
- Related Questions & Answers
- How to make the web page height to fit screen height with HTML?
- How to Make a DIV 100% of the Window Height using CSS
- HTML Screen height Property
- Creating a Page with Sidebar and Main Content Area using HTML & CSS
- How to get the Width and Height of the screen in JavaScript?
- Get div height with vanilla JavaScript
- How to make a div center align in HTML?
- How to make an alert dialog fill 50% of screen size on Android device?
- How to get the value of div content using jQuery?
- Center Triangle at Bottom of Div in HTML with CSS
- How to fill columns with CSS
- How to adjust the height of a div with an iframe inside using jQuery?
- How to get the height of a div element using jQuery?
- Creating a Full Height Page with Fixed Sidebar and Scrollable Content Area in CSS
- How to print div content using jQuery?
Advertisements