html - 使可滚动的div占据剩余高度

Question

我正在尝试制作一个布局非常简单的页面:一个位于一个位置的页眉，以及在其下方滚动的内容。标题 div 将是一个未知的高度，显示其所有内容。我希望内容 div 占据页眉底部和页面底部之间的所有空间，并且能够滚动。

我对此有一些限制:

• 我不想使用固定或绝对定位来将页眉保持在适当的位置，而是让一个具有完美高度的 div 显示内容，并且只有那个 div 可以滚动
• 我不想设置 max-height 或任何其他需要知道标题 div 高度的属性

我探索过的实现此目的的两种方法是使用表格布局和使用 flexbox 。我还没有设法使用这两种方法中的任何一种进行滚动。以下是两次尝试的代码。我正在使用 React。任何指针将不胜感激。谢谢!!

编辑:我确实使用内联样式成功地做到了这一点，并在标题生成后测量了它的高度。这适用于桌面版 chrome、android chrome 和 android 浏览器，但它在 ios safari 中出现故障。我不知道它为什么坏了，我正在调试，但我更喜欢不需要内联样式的更简洁的解决方案。谢谢!

react 元素:

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也可以。您可以使用一些“hack”通过 flex-box 轻松地做到这一点。

我在你的 flex box 示例上工作，你可以在我制作的这支小笔中自己看到它 http://codepen.io/elleestcrimi/pen/LENQvr

整个思路是这样的:

1. header 有 flex-grow: 0//这只会填充与内容一样多的空间
2. 内容有flex-grow: 1//这样即使没有内容也能填满空间
3. 将 content 的所有子元素放入一个名为 #inner-content 的新 div 中
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;
  height: 100%; // this is needed if you are using any other element
}