html - 全屏布局

Question

全屏布局问题重重。我们将不胜感激基于表格或 CSS 的解决方案。

目标是扩展到查看屏幕，“nav”由宽度固定，“top”由高度固定，最好没有 javascript。下面的代码一直有效，直到“内容”填满。当发生这种情况时，它需要滚动。但是， td 上的溢出不起作用。也不会将它包裹在溢出的 div 周围。我认为这与表格自动扩展以适应内容分区有关。但是，由于内容 div 需要拉伸(stretch)到屏幕，所以它不能有固定的高度。

    <table style="width: 100%; background: blue; height: 100%">
        <tr>
            <td id="nav" style="width: 200px; background: yellow"></td>

            <td style="background: green">
                <table style="width: 100%; height: 100%; background: purple">
                    <tr>
                        <td id="top" style="height: 200px; background: orange"></td>
                    </tr>
                    <tr>
                        <td id="content" style="background: gray; overflow-y: auto">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

    </table>

Answer 1

我发现 this css layout ，部分称为“粘性页脚”一直是最好的布局，它很简单，并且可以根据您的内容轻松扩展或收缩。