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

Question

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

htmlcssscrollflexboxcss-tables

18

我正在尝试制作一个非常简单的页面布局：一个固定位置的标题，以及可以滚动的内容。标题是未知高度，会显示其所有内容。我希望内容占据标题底部到页面底部之间的所有空间，并且可以滚动。

我有一些限制：

我不想使用固定或绝对定位来保持标题的位置，而是使用一个完美高度的 div 显示内容，并仅让该 div 可滚动
我不想设置 max-height 或任何其他需要知道标题 div 高度的属性

我尝试了两种方法来实现这个效果：使用表格布局和 flex 布局。但我都没能成功让滚动起作用。以下是两次尝试的代码。我正在使用 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;
  }
}

- kat

那么 $('.content).css({ 'height' : $(window).height() - $('.header').outerHeight() }); 怎么样？ - Pejs

1

感谢您的建议 @Pejs! 这基本上就是我所做的（尽管是在React中），它在桌面端、Android Chrome和Android浏览器上运行良好，但在iOS Safari上崩溃了。无论如何，没有内联样式会更加简洁，因此我希望能有其他选项。 - kat

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Scott Selby

@kat，我实际上并没有看到这个问题的格式有任何问题。而且这是一个很好的问题！ - hyounis

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- hyounis · Accepted Answer

实际上，即使没有JS也可以很容易地使用flex-box并使用一些“hack”来完成。

我在你的flex box示例之上进行了修改，你可以在我制作的这个小笔记中自行查看http://codepen.io/elleestcrimi/pen/LENQvr

整个想法是这样的:

标题具有flex-grow: 0 //此选项只填充与内容相同的空间
内容具有flex-grow: 1 //这样即使没有内容，也会填满空间
将所有内容的子元素放入名为#inner-content的新div中
将#inner-content绝对定位以填满#content，并允许其滚动。
Tada!

以下是代码：

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