如何使 div 以 100% 的高度和宽度滚动？答案

【问题标题】：how to make div scrollable with 100% height and width?如何使 div 以 100% 的高度和宽度滚动？
【发布时间】：2013-06-08 17:50:30
【问题描述】：

我已经包括了一个表 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 应该只做垂直滚动而不扩大页面大小。

【问题讨论】：

我没有完全理解你的问题，你能详细说明并进行编辑吗？
那么底部的 div 应该是可滚动的，还是什么？
我已编辑。第一个 tr 高度是第二个 tr 的固定高度 100px 剩余高度。并且这个 tr 包含一个 100% 高度和宽度的 div，这个 div 应该只做垂直滚动而不扩大页面大小。

标签： html css

【解决方案1】：

Working jsFiddle Demo

没有必要使用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>

【讨论】：

他可能不知道 CSS 是什么或如何使用它。从他发布的代码来看，我认为最好的办法是发布整个文件。
@HenryHarris 感谢您的建议，我已经添加了整个 HTML 文件 :)

【解决方案2】：

通过您的演示链接，我能够成功查看您的问题。

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

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

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

【讨论】：

想你的答案，看看这个演示。 knowledgewalls.com/realtimejqueryeditor/…。如果你删除空格：nowrap;溢出-y：滚动；溢出-x：隐藏；这个属性然后你可以看到合适的大小。

【解决方案3】：

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

【讨论】：

想你的答案，看看这个演示。 knowledgewalls.com/realtimejqueryeditor/…。如果你删除空格：nowrap;溢出-y：滚动；溢出-x：隐藏；这个属性然后你可以看到合适的大小。

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：