移动端竖屏无滚动布局需求：图片+三等分行表格占满全屏

需求：页面顶部展示一张图片，下方设置一个包含3行的表格，要求这3行表格高度均等，整体页面在任意移动端竖屏模式下均可占满全屏，无需滚动。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .top-image {
            flex: 0 0 auto;
            width: 100%;
        }
        .top-image img {
            width: 100%;
            display: block;
        }
        .bottom-table {
            flex: 1;
            width: 100%;
            border-collapse: collapse;
        }
        .bottom-table tbody {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
        }
        .bottom-table tr {
            flex: 1;
            width: 100%;
        }
        .bottom-table td {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="top-image">
        <img src="5.jpg" alt="Paris">
    </div>
    <table class="bottom-table">
        <tbody>
            <tr style="background-color: red;">
                <td>salam</td>
            </tr>
            <tr style="background-color: blue;">
                <td>Nirman</td>
            </tr>
            <tr style="background-color: blue;">
                <td>Nirman</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

关键实现要点 #

• 全屏基础配置：通过body { height: 100vh; }让页面占满移动端视口，同时重置全局元素的margin和padding，避免默认样式导致滚动。
• 垂直布局分配：用Flexbox布局（flex-direction: column）将页面分为上下两部分，顶部图片容器自适应高度，下方表格容器通过flex: 1占满剩余视口空间。
• 表格行等高实现：给表格的tbody设置Flex布局，每行tr添加flex: 1，自动均等分配表格的可用高度，确保三行高度完全一致。
• 图片适配处理：图片设置display: block消除默认的底部空隙，width: 100%保证在移动端全屏显示。

原代码问题说明 #

1. 用表格包裹图片属于冗余结构，直接使用div容器更灵活。
2. 固定百分比高度没有结合视口高度，无法保证页面完全占满屏幕。
3. min-height属性无法确保行高均等，Flex布局的flex:1才能实现剩余空间的自动分配。

内容的提问来源于stack exchange，提问作者mehrdad NB