Home/ Questions/Q 7852853
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T19:31:12+00:00

Is there a way to setup a layout so that the header is 50px,

  • 0

Is there a way to setup a layout so that the header is 50px, body is 100% and footer is 50px?

I would like the body to use up the entire viewing area at minimum. I would like to have the footer and header to be on the screen at all times

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I created an example in jsfiddle:

    UPDATED JsFiddle: http://jsfiddle.net/5V288/1025/

    HTML:

    <body>
    <div id="header"></div>
    <div id="content"><div>
        Content 
    </div></div>
    <div id="footer"></div>
</body>

    CSS:

    html { height: 100%; }
body {
    height:100%;
    min-height: 100%;
    background: #000000;
    color: #FFFFFF;
    position:relative;
}
#header {
    height:50px;
    width:100%;
    top:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#footer {
    height:50px;
    width:100%;
    bottom:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:100%;
    padding: 0 20px;
}
#content > div {
    padding: 70px 0;
}

    Without border-box the content will be height 100% + 140px padding. With the border-box the content height will be 100% and the padding will be inside.

    • 0