Question

我正在尝试创建一个页面布局，其中大部分页面是静态的，只有单个div滚动的内容。为简单起见，我从两个div“头”和“内容”开始，但我不想在标题上使用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>
            );
    }
});

文件越少：

.scrolly{
    .content{
        overflow: auto;
        max-height: 100%;
    }
}

Answer 1

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

然而，flexbox is here，您现在可以在modern browsers中非常简单地实现流畅的布局。您可以将它用于现代浏览器，并优雅地回退到不支持的那些（namly，IE10及以下版本）。

看到这个小提琴：http://jsfiddle.net/rgthree/92otu6z0/

<强>标记：

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

<强> CSS：

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;
}

Answer 2

您可能想要使用“overflow：scroll”代替：

.scrolly{
    .content{
        overflow: auto;
        max-height: 100%;
    }
}

确保内容实际上大于包含它的.content div！

欲了解更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

如何制作单个子div滚动？

2 个答案: