Question

我试图制作一个布局非常简单的页面：一个停留在一个地方的标题，以及在其下滚动的内容。标题div将是一个未知高度，显示其所有内容。我希望内容div占用页眉底部和页面底部之间的所有空间，以便能够滚动。

我对此有几个限制：

我不想使用固定或绝对定位来保持标题到位，而是使用完美高度的div显示内容，并且只有div可滚动
我不想设置max-height或任何其他需要了解标题div高度的属性

我为实现这一目标而探索的两种方法是使用表格布局和使用弹性框。我还没有设法使用这两种方法中的任何一种进行滚动。以下是两次尝试的代码。我正在使用React。任何指针都将非常感激。谢谢！

编辑：我使用内联样式成功完成此操作，并在生成后测量标题的高度。这适用于桌面，机器人Chrome和Android浏览器上的chrome，但它在ios safari中打破了。我不知道它为什么会破坏，我正在进行调试，但我更喜欢一种不需要内联样式的更干净的解决方案。谢谢！

反应元素：

var SimpleScrolly = 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={"simple_scrolly"}>
                <div className={"header"}>
                    {sampleHeader}
                </div>
                <div className={"content"}>
                    {sampleText}
                </div>
            </div>
            );
    }
});

表格布局的

样式：

.simple_scrolly{

  display: table;
  height: 100%;

  .header{
    display: table-row;
  }

  .content{
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: table-row;
  }
}

灵活布局的样式：

.simple_scrolly{

  display:flex;
  flex-direction: column;
  align-items: flex-start;

  .header{
    flex-grow:0;
  }

  .content{
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    flex-grow:1;
  }
}

Answer 1

没有JS，它实际上是可行的。你可以使用flex-box轻松地使用一点“黑客”来做到这一点。

我在你的弹性箱示例上工作，你可以在我制作的这支小笔中亲眼看到它http://codepen.io/elleestcrimi/pen/LENQvr

整个想法是这样的：

标题有flex-grow: 0 //This only fills up space as much as the content
内容为flex-grow: 1 //This way this fills up the space even if there is no content
将内容的所有子项放入名为#inner-content
您绝对放置#inner-content以填充#content，并允许其滚动。
多田！

以下是代码：

#header {
  flex-grow: 0;
}

#content {
  overflow: hidden;
  flex-grow: 1;
  position: relative;
}

#inner-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

body {
  display: flex;
  flex-direction: column;
}

使可滚动的div占用剩余高度

1 个答案: