Html 带表格的CSS垂直布局_Html_Css_Layout

Html 带表格的CSS垂直布局

html css layout

Html 带表格的CSS垂直布局,html,css,layout,Html,Css,Layout,如果这个问题已经得到了回答，我很抱歉，但是要寻找“100%高度”的东西有点困难我的问题是，我需要100%高度的表格布局，因为浏览器会自动调整单元格大小，出于明显的原因，我不想自己编写脚本它不同于其他“100%问题”，因为我需要一些单元格粘贴在顶部，一些粘贴在底部，并通过浏览器调整中间部分的大小以填充剩余空间这种方法很有效，当我需要中间部分包含溢出的内容时，问题就出现了，很明显，我想要溢出：auto-there允许用户通过这些内容。它在WebKit中工作；在Firefox中，它不是；其他未经

如果这个问题已经得到了回答，我很抱歉，但是要寻找“100%高度”的东西有点困难

我的问题是，我需要100%高度的表格布局，因为浏览器会自动调整单元格大小，出于明显的原因，我不想自己编写脚本

它不同于其他“100%问题”，因为我需要一些单元格粘贴在顶部，一些粘贴在底部，并通过浏览器调整中间部分的大小以填充剩余空间

这种方法很有效，当我需要中间部分包含溢出的内容时，问题就出现了，很明显，我想要溢出：auto-there允许用户通过这些内容。它在WebKit中工作；在Firefox中，它不是；其他未经测试。这是测试用例

<html>
<head>
    <style>

        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        table {
            height: 100%;
            width: 200px;
            border: 0;
        }

        .fill {
            background-color: red;
        }

        .cont {
            overflow: auto;
            height: 100%;
        }

    </style>

</head>
<body>
    <table>
        <tr>
            <td style="height:50px"></td>
        </tr>
        <tr>
            <td style="height:100px"></td>
        </tr>
        <tr>
            <td class="fill">
                <div class="cont">
                    An opaque handle to a native JavaScript object. A JavaScriptObject cannot be created directly. JavaScriptObject should be declared as the return type of a JSNI method that returns native (non-Java) objects. A JavaScriptObject passed back into JSNI from Java becomes the original object, and can be accessed in JavaScript as expected
                </div>
            </td>
        </tr>
        <tr>
            <td style="height:100px"></td>
        </tr>
    </table>
</body>


正文，html{
身高：100%；
保证金：0；
填充：0；
}
桌子{
身高：100%；
宽度：200px；
边界：0；
}
.填充{
背景色：红色；
}
续{
溢出：自动；
身高：100%；
}
本机JavaScript对象的不透明句柄。无法直接创建JavaScriptObject。JavaScriptObject应该声明为返回本机（非Java）对象的JSNI方法的返回类型。从Java传回JSNI的JavaScriptObject成为原始对象，可以按预期在JavaScript中访问

试试这个，它很管用

我使用

Internet Explorer 7和8（Windows）
火狐3.5 （Mac和Windows）
Safari 4.0（Mac& （窗户）

也许您想更改宽度并将最小高度增加到像素值


正文，html{
身高：100%；
保证金：0；
填充：0；
}
桌子{
身高：100%；
宽度：200px；
边界：0；
}
.填充{
背景色：红色；
}
续{
位置：相对位置；
最大高度：100%；
最小高度：100%；
身高：100%；
}
.cont2{
位置：绝对位置；
身高：100%；
溢出：自动；
}
50px
100px
本机JavaScript对象的不透明句柄。无法直接创建JavaScriptObject。JavaScriptObject应该声明为返回本机（非Java）对象的JSNI方法的返回类型。从Java传回JSNI的JavaScriptObject成为原始对象，可以按预期在JavaScript中访问
100px

试试这个，它很管用

我使用

Internet Explorer 7和8（Windows）
火狐3.5 （Mac和Windows）
Safari 4.0（Mac& （窗户）

也许您想更改宽度并将最小高度增加到像素值


正文，html{
身高：100%；
保证金：0；
填充：0；
}
桌子{
身高：100%；
宽度：200px；
边界：0；
}
.填充{
背景色：红色；
}
续{
位置：相对位置；
最大高度：100%；
最小高度：100%；
身高：100%；
}
.cont2{
位置：绝对位置；
身高：100%；
溢出：自动；
}
50px
100px
本机JavaScript对象的不透明句柄。无法直接创建JavaScriptObject。JavaScriptObject应该声明为返回本机（非Java）对象的JSNI方法的返回类型。从Java传回JSNI的JavaScriptObject成为原始对象，可以按预期在JavaScript中访问
100px

你说“它没有，”。。。请完成以下句子：“在Firefox中，它不是”是一个逗号拼接。它在Firefox中不起作用，但在基于WebKit的浏览器中起作用。这听起来像是一个标准的页眉-页脚布局，与人们使用CSS设计的许多这样的布局没有什么不同。（搜索“sticky footer”（粘性页脚）可以获得比你摇杆更多的示例。）为什么你认为你需要一个表格？不，这不是页眉/页脚的问题，这里的重点是让浏览器缩放中间单元格以填充剩余空间，并使其内容溢出。如果你想在WebKit中测试这个示例，你会看到它是如何工作的。这是一个页眉/页脚问题-页面的中间可以用一个“内部”滚动条滚动-即不是页面滚动条你说“它没有”。。。请完成以下句子：“在Firefox中，它不是”是一个逗号拼接。它在Firefox中不起作用，但在基于WebKit的浏览器中起作用。这听起来像是一个标准的页眉-页脚布局，与人们使用CSS设计的许多这样的布局没有什么不同。（搜索“sticky footer”（粘性页脚）可以获得比你摇杆更多的示例。）为什么你认为你需要一个表格？不，这不是页眉/页脚的问题，这里的重点是让浏览器缩放中间单元格以填充剩余空间，并使其内容溢出。如果您在WebKit中测试该示例，您将看到它是如何工作的

<html>
<head>
    <style>

        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        table {
            height: 100%;
            width: 200px;
            border: 0;
        }

        .fill {
            background-color: red;
        }

        .cont {
            position:relative;
            max-height:100%;
            min-height:100%;
            height: 100%;
        }

        .cont2 {
            position:absolute;
            height: 100%;
            overflow:auto;
        }

    </style>

</head>
<body>
    <table>
        <tr style="height:50px">
            <td style="height:50px">50px</td>
        </tr>
        <tr style="height:50px">
            <td style="height:100px">100px</td>
        </tr>
        <tr>
            <td class="fill">
                 <div class="cont">
                    <div class="cont2">
                    An opaque handle to a native JavaScript object. A JavaScriptObject cannot be created directly. JavaScriptObject should be declared as the return type of a JSNI method that returns native (non-Java) objects. A JavaScriptObject passed back into JSNI from Java becomes the original object, and can be accessed in JavaScript as expected
                    </div>
                 </div>
            </td>
        </tr>
        <tr style="height:50px">
            <td style="height:100px">100px</td>
        </tr>
    </table>
</body>