0

I want to create a table-like page, with 4 rows and 3 columns, always using 100% of the whole page. So I am doing the following:

body,html   { height: 100%; }
img         { width: 95%; border: 2px solid black; }
.LayoutRow  { display: table; table-layout: fixed; width: 100%; max-height: 25%; }
.LayoutCol  { display: table-cell; border: 2px dashed black; padding: 10px; }
<body>
    <div style="height: 100%;">
        <div class="LayoutRow">
            <div class="LayoutCol">
                <h3>Cell XYZ</h3>
                <img src="img.jpg" />
            </div>
            <!-- add 2 more columns here -->
        </div>
        <!-- add 3 more rows here -->
    </div>
</body>

This basically works fine, I get exactly that table-like structure with "cells" on my page. Regardless of how I size the browser, the page always uses the whole browser window and the cells width occupy 1/3 of the page and their height occupy 1/4 of the page.

However, the images within the cells are quite large, so the browser should reduce their size in order to not extend the cell size larger than 100% of the whole page. But this does not work, even though I use max-height for the .LayoutRow class.

How can I make sure that those images use as much space as possible, but never more then they should have so that a row does not become larger than 25% of the page?

GucciBananaKing99
  • 1,473
  • 1
  • 11
  • 31
Matthias
  • 9,817
  • 14
  • 66
  • 125
  • Does this answer your question? [display table height not always respected](https://stackoverflow.com/questions/36987114/display-table-height-not-always-respected) – Gustavo Goulart Aug 13 '21 at 12:52

1 Answers1

0

How you do this with you table is not possible, look this question: Child with max-height: 100% overflows parent

But you can do a solution with css grid, like that:

body,html   { height: 100%; margin: 0;}
img         { width: 95%; border: 2px solid black; height: calc(100% - 4.17em);}
.LayoutGrid  {display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, minmax(0, 25%));height: 100%; }
<body>
    <div style="height: 100%;" class="LayoutGrid">
        <div class="LayoutCell">
            <h3>Cell XYZ</h3>
            <img src="img.jpg" />
        </div>
        <div class="LayoutCell">
            <h3>Cell XYZ</h3>
            <img src="img.jpg" />
        </div>
        <div class="LayoutCell">
            <h3>Cell XYZ</h3>
            <img src="img.jpg" />
        </div>
        <div class="LayoutCell">
            <h3>Cell XYZ</h3>
            <img src="img.jpg" />
        </div>
        <div class="LayoutCell">
            <h3>Cell XYZ</h3>
            <img src="img.jpg" />
        </div>
        <div class="LayoutCell">
            <h3>Cell XYZ</h3>
            <img src="img.jpg" />
        </div>
        <div class="LayoutCell">
            <h3>Cell XYZ</h3>
            <img src="img.jpg" />
        </div>
        <div class="LayoutCell">
            <h3>Cell XYZ</h3>
            <img src="img.jpg" />
        </div>
        <div class="LayoutCell">
            <h3>Cell XYZ</h3>
            <img src="img.jpg" />
        </div>
        <div class="LayoutCell">
            <h3>Cell XYZ</h3>
            <img src="img.jpg" />
        </div>
        <div class="LayoutCell">
            <h3>Cell XYZ</h3>
            <img src="img.jpg" />
        </div>
        <div class="LayoutCell">
            <h3>Cell XYZ</h3>
            <img src="img.jpg" />
        </div>
    </div>
</body>
Hugo Levet
  • 319
  • 1
  • 9
  • This leads to the same probleme - the images within your `LayoutCell` divs makes them larger, they get a height more than 25% :-( – Matthias Aug 16 '21 at 11:06