Javascript 如何制作单个子div滚动条？

我试图创建一个页面布局，其中大部分页面是静态的，只有一个div滚动条的内容。为简单起见，我从两个div“header”和“content”开始，但我不想在header上使用

position:fixed

，因为我希望能够将其扩展到页面上有任意数量的其他元素。我如何做到这一点

下面是到目前为止我已经掌握的代码（我正在使用React）。现在，它根本没有滚动

谢谢

反应元素：

var Scrolly = React.createClass({

    render: function(){
        var lorem = "Lorem ipsum dolor sit amet... ";
        var sampleText = lorem + lorem + lorem + lorem;
        var sampleHeader = "this is a header!"

        return(
            <div className={"scrolly"}>
                <div className={"header"}>
                    {sampleHeader}
                </div>
                <div className={"content"}>
                    {sampleText}
                </div>
            </div>
            );
    }
});

您可能需要使用“溢出：滚动”来代替：

并确保内容实际大于其所在的.content div

有关更多信息：

---

要获得最大的浏览器支持，您需要使用绝对/固定位置和高度的刚性组合。对于每个新元素，这意味着要对其进行调整

但是，现在您可以在中非常简单地实现流动布局。您可以将其用于现代浏览器，对于不支持的浏览器（namly、IE10及以下），您可以优雅地使用不同的布局

看这把小提琴：

标记：

<div class="container">
    <div class="header">
        {sampleHeader}
    </div>
    <div class="content">
        {sampleText}
    </div>
</div>

html, body {height:100%; margin:0px; padding:0px;}
.container {
    display:flex;
    flex-direction: column;
    height: 100%;
}

.container .header {
    height:50px;
    background:#CCC;
    flex-grow:0;
}
.container .content {
    overflow: scroll;
    overflow-x: hidden;
    background:#FAFAFA;
    flex-grow:1;
}

---

谢谢你的快速回复！我尝试了

overflow:scroll

，但它没有改变任何东西（我对这些属性的理解是，它只与滚动条是否可见有关）。我希望

max height

能够确保div结束于屏幕底部，并且我可以直观地看到内容溢出了屏幕底部。这是否不足以确保内容大于其容器div？更新：我尝试设置

max height:100px

而不是

max height:100%

，结果成功了！感谢您提供有关内容高度的提示。知道为什么100%没有适当限制div大小吗？没问题：）。最大高度为100%指的是div所在的容器，因此，如果容器与视口（屏幕）一样大，则只有在内容增长时才会注意到浏览器滚动！我看不出这有什么帮助<代码>最大高度：100%不会阻止

.content

离开页面而不补偿

.header

的高度。此外，

.scrolly

需要设置一个高度才能工作。另外，@kat，如果你给它一个

最大高度：100px

并将浏览器的大小调整为小于该高度，你的

.content

仍然会离开屏幕。@rg我知道

最大高度：100px

不起作用，如果我限制div的高度，这只是一个实验，看看我的代码是否正常工作。你说得对，我需要根据视口大小动态调整它的大小。我本来打算使用javascript和内联样式来实现这一点，但由于您的回答，我现在将研究flexbox。谢谢谢谢你的回答！你能澄清一下flex会给我带来什么好处吗？是否不管窗口大小，div仍然占据页面的其余部分？是的。正如你所期望的那样。每个项目都可以流动以占用所有可用空间。此外，如果您添加了一个新项目（例如，子标题），则根本不需要触摸.content的样式。这一切都很有效。你想在你的情况下使用flexbox（你的问题基本上是“我如何使用flexbox”哈哈）。在这一点上，它只是归结为浏览器支持。请注意，我在回答中还提供了flexbox的MDN链接，因此您可以自己评估它：谢谢！我在答案（）中提供了一个详细的链接。看起来像iOS 7.1+、Android 4.4+、IE Mobile 11、Opera Mobile 12.1、适用于Android 39的Chrome和适用于Android 33和黑莓浏览器10的Firefox。Safari（iOS和OSX）和Blackberry，您需要添加“-webkit-”前缀属性。有一个旧版本的flexbox，浏览器在规范最终确定之前就开始实现了（提供的链接中的浅绿色框）。如果您想进一步了解，您可以学习该语法，但在我看来，我会优雅地降级为静态布局。

<div class="container">
    <div class="header">
        {sampleHeader}
    </div>
    <div class="content">
        {sampleText}
    </div>
</div>

html, body {height:100%; margin:0px; padding:0px;}
.container {
    display:flex;
    flex-direction: column;
    height: 100%;
}

.container .header {
    height:50px;
    background:#CCC;
    flex-grow:0;
}
.container .content {
    overflow: scroll;
    overflow-x: hidden;
    background:#FAFAFA;
    flex-grow:1;
}