0

I'm trying to achieve the following layout:

  1. Top bar
  2. Main content placeholder
  3. Bottom bar

The main content has (always one at the same time though) children, one of which is a table which should always be square.

How can I do this with CSS? I've tried flexbox and CSS grid including aspect-ratio but couldn't get it to work.

The idea is basically the following:

  1. Top/Main content/Bottom is always the same height/full width
  2. If there's a table inside the main content, it should be square. The main content placeholder should remain the size but the table within should always be automatically resized to be square (ideally with the minimum of available width or height)
  3. To achieve this, it's okay for the top bar the change its height, the bottom bar should remain fixed

Here's some example code I've tried:

<!DOCTYPE html>
<html lang="en" style="height: 100%;">

<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
    .main {
      background: gray;
      height: 100vh;
      grid-template-rows: 20% 60% 20%;
      display: grid;
    }
    
    .top {
      background: red;
    }
    
    .placeholder {
      background: green;
      width: 100%;
      height: 100%;
      position: relative;
    }
    
    .square-table {
      background: yellow;
      aspect-ratio: 1/1;
      height: 100%;
      position: absolute;
    }
    
    .bottom {
      background: blue;
    }
  </style>
</head>

<body style="height: 100%;">
  <div class="main">
    <div class="top">Top</div>
    <div class="placeholder">
      <p>Generic placeholder</p>
      <table class="square-table">
        <tbody>
          <tr>
            <td>abc</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="bottom">Bottom</div>
  </div>
</body>

</html>

Any help or pointers in the right direction would be much appreciated.

IT goldman
  • 14,885
  • 2
  • 14
  • 28
Andrin Meier
  • 3
  • 1
  • 1
    Have a look at [this] (https://stackoverflow.com/questions/22835430/make-table-cells-square). The idea is as long as your table cells are square, your table layout will be square. – Dorji Tshering Jul 10 '22 at 10:25

1 Answers1

0

Grid children have min-height: auto set by default which means they will always resize based on the content. So you can set min-height: 100% on the .placeholder div. Then I set the placeholder div to also be a grid, and then the min-height fix on the table again -- see solution below

body { color: white; margin: 0; font-family: sans-serif; text-align: center }

.main { background: gray }
.top { background: red }
.placeholder { background: green }
.bottom { background: blue }
.square-table { background: yellow; color: black }

.main {
  height: 100vh;
  grid-template-rows: 20% 60% 20%;
  display: grid;
}

.placeholder {
  min-height: 100%;
  grid-template-rows: fit-content(0) 1fr;
  display: grid;
  justify-content: center;
}

.square-table {
  margin: auto;
  max-height: 100%;
  min-height: 100%;
  aspect-ratio: 1/1;
}
<div class="main">
  <div class="top">Top</div>
  <div class="placeholder">
    <div> <!-- if no intro just remove <p> tag and leave the <div> empty -->
      <p>Generic placeholder</p>
    </div>
    <table class="square-table">
      <tbody>
        <tr>
          <td>abc</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="bottom">Bottom</div>
</div>
Simp4Code
  • 1,394
  • 1
  • 2
  • 11