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

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

flex布局的样式:

.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

整个想法是这样的:

1. 标题有 flex-grow: 0 //This only fills up space as much as the content
2. 内容有 flex-grow: 1 //This way this fills up the space even if there is no content
3. 将所有内容的子项放入一个名为的新div中 #inner-content
4. 你绝对放置#inner-content填充#content,你允许它滚动.
5. 田田!

这是下面的代码:

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