CODEWITHSUNDEEP
htmlcss
user777692
user777692

Reputation: 21

How to fix height 100% in content page ? CSS and Div

How to fix height 100% in content page ? CSS and Div

Header=72px
Content Height=100%
footer=72px

I would like to fix expend Content height 100% full screen. Best Regards

Upvotes: 0

Views: 4883

Answers (2)

Neddy
Neddy

Reputation: 503

If I understand correctly, I think you want the header and footer to each be 72px high, and the content to take up 100% of the remaining space. So the footer is pushed to the bottom of the page.

Markup, place this so #container is the only direct child of body. In other words place all of your content is inside the #header, #body, and #footer.

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

Style

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   padding:10px;
   height:72px;
}
#body {
   padding:10px;
   padding-bottom:72px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:72px;   /* Height of the footer */
}

Upvotes: 2

Jawad
Jawad

Reputation: 6672

If your content is in a div, give it a height as follows

<div id="container">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>

div#container
{
height: 100%;
}

div#header
{
height: 72px;
}

div#content
{
height: 100%;
}

div#footer
{
height: 72px;
}

Upvotes: 0

Related Questions