我想创建一个类似表格的页面，有4行3列，总是使用整个页面的100%。所以我要做的是:
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>这基本上工作得很好，我得到了与"单元格"在我的页面上。无论我如何调整浏览器的大小，页面总是占用整个浏览器窗口，单元格的宽度占页面的1/3，高度占页面的1/4。
然而，单元格中的图像相当大，因此浏览器应该减小它们的大小，以避免扩展单元格的大小超过整个页面的100%。但是这不起作用，即使我将max-height用于.LayoutRow类。
我怎么能确保这些图像使用尽可能多的空间，但从来没有超过他们应该有，使一行不成为超过25%的页面?
如何做到这一点与您的表是不可能的，看看这个问题:子与max-height: 100%溢出父
但是你可以用css grid来解决这个问题，像这样:
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>