html page layout, content div height fills all remaining space

Question

can't get working layout as I want for the page I am creating for my portfolio website. I have header with navigation(fixed size div). then I have content div and I have footer

<div>header</div>
<div>content</div>
<div>footer</div>

I want footer be fixed size, let say 200px, fixed always to the bottom of page. but content should fill all remaining space from header to footer. so that content div height would depend on windows height. By changing height only content div would change size.

Well, there are plenty of questions and answers on SO that address this kind of layout. Only if you searched. — Terry, Jan 17 '17 at 19:06
Possible duplicate of [Make a div fill the height of the remaining screen space](http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — Banzay, Jan 17 '17 at 19:13
Flagged as dupe of [Make a div fill the height of the remaining screen space](http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space). — Fred Gandt, Jan 17 '17 at 19:17

score 1 · Answer 1 · answered Jan 17 '17 at 19:32

1

header {
    width: 100%;
    position: fixed;
    background-color: #9f0d0d;
    color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    min-height: 5%;
}

    header :first-child {
        vertical-align: middle;
        margin-top: auto;
        margin-bottom: auto;
    }

article {
    top: 55px;
    width: 100%;
    height: 90%;
    position: fixed;
}

footer {
    top: 95%;
    min-height: 5%;
    width: 100%;
    position: fixed;
    padding: 10px 15px;
    background-color: #9f0d0d;
    color: #f5f5f5;
    border-top: 1px solid #ddd;
}

    footer :first-child {
        vertical-align: middle;
        margin-top: auto;
        margin-bottom: auto;
    }

.centre {
    text-align: center;
}

<div class="centre">
  <header>Header</header>
  <article>Remaining space</article>
  <footer>Footer</footer>
</div>

answered Jan 17 '17 at 19:32

jmag

796
1
8
17

I have tested this solution, but here header and footer are not fixed size and it changes when page is resized. – user3185161 Jan 17 '17 at 20:18
yes. you can replace the values according to your need. the values in there, are the way I wanted them. basically, the solution is to give you the general idea on what properties to move them to the spot you wanted. – jmag Jan 17 '17 at 20:33
it is based on a responsive concept I used in a mobile web app. everything resizes according to the screen size of the device. declare min-height:200px; if you like your footer to stay minimum height. you can also adjust all other properties according to your hearts content. – jmag Jan 17 '17 at 20:42

score 1 · Accepted Answer · answered Jan 17 '17 at 20:48

flex makes it easy:

body {
  margin:0;
  height:100vh;
  /* eventually : min-height: xx ; to avoid main to be squeezed down to zero  in between header and footer */
  display:flex;
  flex-flow:column;
  }
.main {
  flex:1;/* fills remaining space */
  overflow:auto;/* comes handy */
  background:lightgray;/* see me */
  }
  div {
  padding:1em;/* whatever */
  }

<div>header of any height</div>
<div class="main">content</div>
<div>footer of any height</div>

html page layout, content div height fills all remaining space

2 Answers2