HTML -> Fixed top, Flexible bottom with min-height and dynamic squared content

Question

I'm really struggling to create css layout like this:

Top row: fixed size: Ex: 50px;

Content: the biggest square the current width can fit. So width = height for this one. It should respect the bottom row min-height.

Bottom row: take all remaining space available, and with min-height. Ex: 50px.

No scrollbar. The idea is to use the current screen the best way possible for any resolution. No javascript unless it's only possible with js.

Any ideas?

That's the best I've got so far:

   <div class="shell">
      <div class="header"></div>
      <div class="square"></div>
      <div class="footer"></div>
    </div>

css

body {
  margin: 0px;
}
.shell {
  background-color: #000000;
  height: 100vh;
  max-width: calc(100vh - 100px);
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

.header {
  background-color: #0000ff;
  height: 50px;
}

.square {
  width: 100%;
  background-color: #dc143c;
}

.footer {
  background-color: #00008b;
  height: 100vh;
}

I tried millions of combinations already. Should I post them all? There was a time when S.O. was about helping people :( — andrecarlucci, May 17 '21 at 21:09

score 1 · Accepted Answer · answered May 17 '21 at 21:35

You can use padding to get the aspect ratio:

body {
  margin: 0px;
}
.shell {
  background-color: #000000;
  height: 100vh;
  max-width: calc(100vh - 100px);
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

.header {
  background-color: blue;
  height: 50px;
}

.square {
  width: 100%;
  padding-top: 100%;
  background-color: green;
}

.footer {
  background-color: red;
  height: 100%;
}

<div class="shell">
  <div class="header"></div>
  <div class="square"></div>
  <div class="footer"></div>
</div>

Reference here

The footer size isn't 100% of remaining space, but 100% of entire container, but scroll isn't visible cause you hide it by `overflow: hidden`. — ulou, May 19 '21 at 09:04

score 0 · Answer 2 · answered May 17 '21 at 21:37

I think your question was already solved here: Make a div fill the height of the remaining screen space

Mixed with your try:

body {
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  background-color: #000000;
  height: 100vh;
  max-width: calc(100vh - 100px);
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}


.box .row.header {
  flex: 0 1 50px;
  background-color: #0000ff;
}

.box .row.content {
  flex: 1 1 auto;
  width: 100%;
  background-color: #dc143c;
}

.box .row.footer {
  flex: 0 1 40px;
  background-color: #00008b;
}

<div class="box">
  <div class="row header">
  </div>
  <div class="row content">
  </div>
  <div class="row footer">
  </div>
</div>

Fiddle: https://jsfiddle.net/901s2kdL/

It doesn't work when the width is too small. If that happens, it's not a square anymore. — andrecarlucci, May 19 '21 at 08:13

ulou · Answer 3 · 2021-05-19T09:19:22.920

Content: the biggest square the current width can fit. So width = height for this one. It should respect the bottom row min-height.

If you want the biggest square, the footer height will be fixed and it will be equal to min-height always (and it should be), so it doesn't matter if you will set it's height to 100% or 50px. max-width of square determining really sizes. If you look at this max-width: calc(100vh - 100px), the - 100px part is the real remaining space including header and footer, so if the header height is set to 50px, the footer height is also 50px.

body {
  margin: 0px;
}

.shell {
  background-color: black;
}

.header {
  height: 50px;
  background-color: red;
}

.square {
  max-width: calc(100vh - 100px);
  margin: 0 auto;
  background-color: green;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.footer {
  height: 50px;
  background-color: blue;
}

<div class="shell">
    <div class="header"></div>
    <div class="square"></div>
    <div class="footer"></div>
</div>

It stayed a square, but the bottom part has a fixe height instead of taking all remaining space available. — andrecarlucci, May 19 '21 at 08:19
I've updated the post about explanation why it doesn't matter if it's `100%` or `50px`. — ulou, May 19 '21 at 08:46

HTML -> Fixed top, Flexible bottom with min-height and dynamic squared content

3 Answers3