
- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
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% }
- Related Articles
- 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
- Creating a Page with Sidebar and Main Content Area using HTML & CSS
- How to adjust the width and height of an iframe to fit with content in it HTML?
- HTML Screen height Property
- How to make div elements display inline using CSS?
- How to make a div center align in HTML?
- Center Triangle at Bottom of Div in HTML with CSS
- How to copy the content of a div into another div using jQuery?
- How to adopt a flex div's width to content 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?
- How to clear the content of a div using JavaScript?
- How to fill columns with CSS
- Creating a Full Height Page with Fixed Sidebar and Scrollable Content Area in CSS

Advertisements