0

全屏布局遇到麻烦。将不胜感激基于表格或 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>
4

3 回答 3

0

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

于 2009-06-09T23:28:08.750 回答
0

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

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

于 2009-06-09T23:29:07.500 回答
0

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

这是我编写的一些代码，以在没有表格的情况下获得 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>
于 2009-06-10T01:16:38.937 回答