2

I have a requirement on which we have Header, Middle Section and Footer.

Header and Footer height can be more or less depending on the various screen sizes and content within them.

Footer will be sticky, at the end of the screen if the page doesn't contain scroll and should not overlap over the middle content if scrolling occurs for small screens. Typical sticker footer behavior.

Middle section contains two columns. And Each column content should be vertically center aligned.

Please refer below screenshot for reference what

Note: I can use normal sticky footer and CALC to adjust the height of the main content, but it will not be dynamic. I don't want to use javascript to do all mathematics on DOMContentLoaded and window resize.

enter image description here

Community
  • 1
  • 1
Shyam
  • 782
  • 5
  • 12
  • [this answer](https://stackoverflow.com/questions/39454280/responsive-grid-layout-with-fixed-header-footer-and-scrollable-content/39454511#39454511) might help you get started... – kukkuz Feb 19 '19 at 04:36
  • Thanks, @kukkuz, but your suggested answer is not fit for the given scenario. – Shyam Feb 19 '19 at 05:02
  • add your code. thanks – Xenio Gracias Feb 19 '19 at 05:28
  • Do you want the footer to be visible all the times? and you don't want the footer to overlap the body content?? – YourPalNurav Feb 19 '19 at 05:28
  • Though the idea is nice much similar to mobile application, but nonetheless we have no code here and unless you expect someone to do it entirely for you, probably stackoverflow is not the right place. – vssadineni Feb 19 '19 at 05:46
  • @YourPalNurav, I don't want the footer to be visible all the times. It should behave as normal sticky footer, if page have less content then window height, Footer should be sticky at the bottom of the screen, else it should be after all content of the page. – Shyam Feb 19 '19 at 08:14
  • @vssadineni, sometimes it is better to write/think as our own way instead of editing someone's code or thinking like someone else. This requirement is some tricky and it can have few approaches to achive the goal, so I didn't share any code. – Shyam Feb 19 '19 at 08:17

1 Answers1

4

My approach uses a bunch of flexboxes and keeps things simple.

  • .container is a columnar flexbox
  • main takes up the most available space
  • header, footer take only the space they need (dynamic)
  • main is also a flexbox, but in the row direction to house the left and right panels
  • the panels, too, are flexbox containers, centering their content horizontally and vertically
  • You might want to view the demo in 'Full page' mode, or in jsFiddle

enter image description here

html,
body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
  display: flex;
  background-color: #eee;
}

.panel1,
.panel2 {
  background-color: brown;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-content {
  background-color: #ccc;
  padding: 3em;
}

header,
footer {
  background-color: #ccc;
  padding: 1em;
  text-align: center;
}
<div class="container">
  <header>Header</header>
  <main>
    <div class="panel1">
      <div class="panel-content">
        Content
      </div>
    </div>
    <div class="panel2">
      <div class="panel-content">
        Content
      </div>
    </div>
  </main>
  <footer>Sticky Footer</footer>
</div>

jsFiddle

Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61