CODEWITHSUNDEEP
csshtml
Mauro Bilotti
Mauro Bilotti

Reputation: 6252

How to set the height of the HTML page without considering the footer?

I want to leave out the footer of the height of the page such as Google Chrome does when you download a file. My page looks like this:

enter image description here

And I want to keep out of scrolling just like:

enter image description here

This is the code of my footer:

 <footer class="tr-emulate">
      <div class="float-left" style="margin-left: 5px; padding-top: 8px;">
          <button class="k-button" onclick="javascript:document.getElementById('logoutForm').submit();">Cerrar sesión: @User.Identity.Name</button>
      </div>
      <div class="float-right" style="margin-right: 5px; padding-top: 12px;">&copy; @DateTime.Now.Year - DirecTV  &nbsp;</div>
 </footer>

and this is the CSS style of the tag:

footer {
    clear: both;
    background-color: #e2e2e2;
    font-size: .8em;
    text-align: left;
    width: 100%;
    bottom: 0;
    position: fixed;
    height: 37px;
}

How can I do that?

Upvotes: 1

Views: 76

Answers (1)

web-tiki
web-tiki

Reputation: 103810

This should get you on the right path:

FIDDLE

HTML:

<div id="wrap">
    <div id="content"></div>
</div>
<footer></footer>

CSS:

body, html{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
#wrap{
    height:90%;
    width:100%;
    overflow:auto;
}
#content{
    height:300%;
    width:100%;
    background:green;
}

footer{
    width:100%;
    height:10%;
    position:fixed;
    bottom:0;
    left:0;
    background:red;
}

Upvotes: 2

Related Questions