0

I am trying to make a layout, which should occupy the height of header and footer leaving rest to the main container. ( sidebar, content ). but not able to archive this. any one help me?

I do not have fixed height for both header and footer. ( it should only occupy content height )

.container {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: 100px auto;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  height: 100vh;
}

.header { grid-area: header; background-color: yellow; }
.sidebar { grid-area: sidebar; background-color: gray; }
.footer { grid-area: footer; background-color: green;}
.content { grid-area: content; }
 <div class="container">
  <div class="header">header should shrink with it's content</div>
  <div class="sidebar">it should be rest of the height from header and footer</div>
  <div class="footer">footer should shrink with it's content</div>
  <div class="content">
    <p>it should be rest of the height from header and footer</p>
 </div>
</div>
</div>
user2024080
  • 1
  • 14
  • 56
  • 96

1 Answers1

2
grid-template-rows: auto 1fr auto;

1fr will fill the rest spaces.

html, body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100px auto;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  height: 100vh;
}

.header { grid-area: header; background-color: yellow; }
.sidebar { grid-area: sidebar; background-color: gray; }
.footer { grid-area: footer; background-color: green;}
.content { grid-area: content; }
<div class="container">
  <div class="header">header should shrink with it's content</div>
  <div class="sidebar">it should be rest of the height from header and footer</div>
  <div class="footer">footer should shrink with it's content</div>
  <div class="content">
    <p>it should be rest of the height from header and footer</p>
 </div>
</div>
</div>
Derek Wang
  • 10,098
  • 4
  • 18
  • 39