CODEWITHSUNDEEP
htmlcss
user3185161
user3185161

Reputation: 53

html page layout, content div height fills all remaining space

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.

Upvotes: 0

Views: 58

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106008

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>

Upvotes: 1

jmag
jmag

Reputation: 826

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>

Upvotes: 1

Related Questions