滚动 div，而不是整个页面答案

【问题标题】：scroll the div, not the whole page滚动 div，而不是整个页面
【发布时间】：2017-03-15 17:02:54
【问题描述】：

我在 SO 上看到过类似的问题，但没有一个问题能像我在这里所说的那样简单。

使用 CSS，我想将页面分为三个部分：左窗格（将包含导航链接）、标题栏和带有滚动条的内容窗格。我事先不知道窗口的大小会是多少，所以我想尽可能使用比例大小（例如“15%”）。

我遇到麻烦的地方是给内容窗格一个滚动条来显示它的溢出（如果有的话）。我希望能够自行滚动该 div，而无需移动页面的标题或左侧导航部分。

我已经看到这类事情在 Javascript 和 resize 事件处理程序的帮助下完成，但我很难相信它不能用简单的 CSS 完成......？

到目前为止，我可以在 this jfiddle 上看到我所掌握的内容。如您所见，内容窗格中的溢出会触发整个页面的滑动条，而不是我想要的内容窗格。任何关于如何解决这个问题的建议，尤其是单独使用 CSS，将不胜感激。谢谢！

粘贴代码，以防遇到 jsfiddle 问题。 HTML：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
<div class="layout-wrapper">
    <div class="left-pane"></div>
    <div class="right-pane">
        <div class="right-pane-header"></div>
        <div class="right-pane-content">
            <h4>Lo, a list:</h4>
            <ol>
                <li>A list item.</li>
                <li>A list item.</li>
                <li>A list item.</li>
                <!-- etc etc -->
            </ol>
        </div> <!-- right-pane-content -->
    </div> <!-- right-pane -->
</div> <!-- layout-wrapper -->

</body>
</html>

这是 CSS：

html {
    width: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
}

body {
    width: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background-image: url("http://hd-wall-papers.com/images/wallpapers/hd-website-backgrounds/hd-website-backgrounds-20.jpg");
    /*overflow-y: hidden;*/
}

.layout-wrapper {
    display: table;
    width: 100%;
    min-height: 100%;
    background-image: inherit;
}

.left-pane {
    display: table-cell;
    width: 15%;
    min-height: 100%;
    background-color: #ffe0b0;
}

.right-pane {
    display: table-cell;
    width: 85%;
    height: 100%;
    min-height: 100%;
    background-image: inherit;
}

.right-pane-header {
    display: block;
    height: 100px;
    width: 100%;
    background-color: #ffb0b0;
}

.right-pane-content {
    display: block;
    width: 100%;
    background-image: inherit;
    overflow-y: auto;
}

再次感谢！

【问题讨论】：

将高度设置为您希望它滚动的 div.. 并溢出隐藏在 body 上
但我事先不知道高度——我希望它是标题栏下方的“剩下的”。这取决于用户如何设置窗口大小。
动态设置 n 使用 javascript
你确定在这里使用表语义吗？你可以通过切换到 display: flex; 来修复它。如果没有。

标签： html css

【解决方案1】：

也许我不明白这个问题，但如果你只想滚动，你可以让它占据 html 长度的 100%

.right-pane-content {
 display: block;
 width: 100%;
 height: 100%;
 background-image: inherit;
 overflow-y: auto;}

【讨论】：