html – 滚动单元格在100％高度表中

如果这已经得到了回答,我很抱歉,但是搜索“100％身高”的东西有点困难.

我的问题是我需要100％高度的表格布局,因为浏览器自动调整大小,我不想因为显而易见的原因而自行编写脚本.

它不同于其他“100％问题”,因为我需要一些细胞粘在顶部,一些细胞粘在底部,并通过浏览器调整中间值以填充剩余空间.

那种工作,问题发生在我需要中间部分来包含溢出的东西,显然我想要溢出：自动在那里启用用户通过那些东西.它适用于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>

解决方法

我刚才回答了这样的问题,我相信你正在寻找同样的事情,here就是问题本身和我的答案：

HTML

<div class="container">
    <div class="twenty">
        fixed height 20
    </div>
    <div class="fifty">
        fixed height 50
    </div>
    <div class="hundred">
        fixed height 100
    </div>
    <div class="auto">
        <div class="content">
            ....
        </div>
    </div>
    <div class="fifty" style="border-bottom:none; border-top:1px solid">
        fixed height 50
    </div>
</div>

CSS

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

.container {
    width:100%;
    height:100%;
}

.twenty,.fifty,.hundred,.auto {
    border-bottom:1px solid black;
}

.twenty {
    height:20px;
}

.fifty {
    height:50px;
}

.hundred {
    height:100px;
}

.auto {
    height:100%;
    overflow:hidden;
    -webkit-Box-sizing:border-Box;
    -moz-Box-sizing:border-Box;
    -ms-Box-sizing:border-Box;
    Box-sizing:border-Box;
    margin:-120px 0;
    padding:120px 0;
}

.content {
    float:left;
    overflow:auto;
    height:100%;
}

.content{
    width:100%;
}

全景：http://jsfiddle.net/8abeU/show/
小提琴：http://jsfiddle.net/8abeU

html – 滚动单元格在100％高度表中

解决方法

猜你在找的HTML相关文章