CODEWITHSUNDEEP
htmlcsscss-grid
stpoa
stpoa

Reputation: 5573

Fixed header, scrollable content, fixed footer layout

I created an example of what I want to achieve below. It uses position: fixed for top and bottom bars. But I would like it to be inside css grid (I don't want to use margins for header and footer, I also don't want to add hidden div elements), is it possible?

* {
  margin: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  position: fixed;
  width: 100%;
  height: 100px;
  background-color: #aaaaaa;
}

main {
  margin-top: 100px;
  margin-bottom: 50px;
  background-color: #dddddd;
  overflow: scroll;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: #444444;
}
<header>Header</header>
<main>
  Main start
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br> Main inside
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br> Main end
</main>
<footer>Footer</footer>

https://codepen.io/stpoa/pen/zyPqaq

Upvotes: 1

Views: 101

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 372099

You don't need position: fixed. You can make the layout work with grid properties alone.

body {
  display: grid;
  grid-template-rows: 100px 1fr 50px;
  height: 100vh;  
  margin: 0;
}

main {
  overflow: auto;
}

header { background-color: #aaaaaa; }
main   { background-color: #dddddd; }
footer { background-color: #444444; }
<header>Header</header>
<main>
  Main start<br><br><br><br><br><br><br>
  Main inside<br><br><br><br><br><br><br>
  Main inside<br><br><br><br><br><br><br>
  Main inside<br><br><br><br><br><br><br>
  Main inside<br><br><br><br><br><br><br>
  Main inside<br><br><br><br><br><br><br>
  Main inside<br><br><br><br><br><br><br>  
  Main end
</main>
<footer>Footer</footer>

Upvotes: 1

Related Questions