全屏布局答案

【问题标题】：Fullscreen layout全屏布局
【发布时间】：2016-09-26 00:51:52
【问题描述】：

全屏布局麻烦不断。表或基于 CSS 的解决方案将不胜感激。

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

    <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>

【问题讨论】：

标签： html css layout html-table stylesheet

【解决方案1】：

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

【讨论】：

【解决方案2】：

是的，我在使用 Firefox 时遇到过这个问题。 Safari 在这方面做得很好（包括最小高度），但所有其他浏览器都做不到。

我能够做到这一点的方法是使用 Javascript 强制加载和刷新指定的 px 高度。没有它就很难跨平台。

【讨论】：

【解决方案3】：

您真的不应该尝试使用表格进行布局。

这是我编写的一些代码，可以在没有表格的情况下获得 100% 的高度：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css"> 
    <style type="text/css">
        #wrapper {
            height: 100%;
            width: 100%;
        }
        #column1 {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 100%;
            overflow: hidden;
        }
        #column2 {
            position: absolute;
            top: 0;
            left: 200px;
            height: 100%;
            overflow: hidden;
        }
        #row1 {
            height: 200px;
            overflow: hidden;
        }
        #row2 {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="column1" style="background-color: yellow;">
            bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah 
            bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
            bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
            bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
            bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
            bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
            bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
            bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
        </div>
        <div id="column2">
            <div id="row1" style="background-color: orange;">
                bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
            </div>
            <div id="row2" style="background-color: grey;">
                bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah 
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
                bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
            </div>
        </div>
    </div>
</body>
</html>

【讨论】：