0

我已经包括了一张表 100% 和 100%。

<table border="1" cellpadding="0" cellspacing="0" width="100%" height="100%"> 
    <tr height="100">
         <td>
            this is fixed height 100px
         </td>
    </tr>
    <tr>
         <td>
              <div style="height: 100%;width: 100%">
            remaining height for this td. and this div should be do only vertical scrolling without expanding the page size.
              </div>
         </td>
    </tr>
</table>

第一个 tr 高度是固定高度 100px

第二个 tr 的剩余高度。并且这个 tr 包含一个 100% 高度和宽度的 div，这个 div 应该只做垂直滚动而不扩大页面大小。

4

5 回答 5

1

通过您的演示链接，我能够成功地看到您的问题是什么。

<div>您的第二个标签中没有以下代码style=""。

white-space: nowrap; overflow-x: hidden;

如果你添加它，你应该启动并运行。

于 2013-06-08T06:51:44.840 回答
1

工作 jsFiddle 演示

没有必要使用table. 改用div：

<div id="head">this is fixed height 100px</div>

<div id="body">
    Content
</div>

和 CSS：

#head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: yellow;
}

#body {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    background: pink;
    overflow: auto;
}

整页标记：

<!doctype html>
<html>
    <head>
        <title>My Page</title>
        <style>
            #head {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 100px;
                background: yellow;
            }

            #body {
                position: absolute;
                top: 100px;
                left: 0;
                right: 0;
                bottom: 0;
                background: pink;
                overflow: auto;
            }
        </style>
    </head>
    <body>

        <div id="head">this is fixed height 100px</div>
        <div id="body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
        </div>

    </body>
</html>
于 2013-06-08T06:55:19.163 回答
0

尝试style="height:auto; overflow-y:scroll"

于 2013-06-08T06:49:23.440 回答
0

尝试这个 style="height:100%; overflow-y:scroll"

于 2013-06-08T06:54:07.613 回答
0

试试这样<div style="height: 100%;width: 100%;overflow-y: scroll;">

于 2013-06-08T06:55:08.397 回答