html – 使可滚动div占用剩余高度

概述我正在尝试使用一个非常简单的布局创建一个页面：一个停留在一个地方的标题,以及在其下滚动的内容.标题div将是一个未知高度,显示其所有内容.我希望内容div占用页眉底部和页面底部之间的所有空间,以便能够滚动. 我对此有几个限制： >我不想使用固定或绝对定位来保持标头到位,而是使用完美高度的div显示内容,并且只有该div可滚动 >我不想设置max-height或任何其他需要知道header div高 我正在尝试使用一个非常简单的布局创建一个页面：一个停留在一个地方的标题,以及在其下滚动的内容.标题div将是一个未知高度,显示其所有内容.我希望内容div占用页眉底部和页面底部之间的所有空间,以便能够滚动.

@H_419_8@

我对此有几个限制：@H_419_8@

>我不想使用固定或绝对定位来保持标头到位,而是使用完美高度的div显示内容,并且只有该div可滚动
>我不想设置max-height或任何其他需要知道header div高度的属性@H_419_8@

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

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

反应元素：@H_419_8@

@H_419_8@

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

表格布局样式：@H_419_8@

@H_419_8@

.simple_scrolly{  display: table;  height: 100%;  .header{    display: table-row;  }  .content{    overflow: auto;    overflow-x: hIDden;    -webkit-overflow-scrolling: touch;    display: table-row;  }}

flex布局的样式：@H_419_8@

@H_419_8@

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

解决方法 没有Js,它实际上是相当可行的.你可以使用flex-Box轻松地使用一点“黑客”来做到这一点.

@H_419_8@

我在你的d性盒子例子上工作,你可以在我制作http://codepen.io/elleestcrimi/pen/LENQvr的这支小笔中亲眼看到它@H_419_8@

整个想法是这样的：@H_419_8@

>标题有flex-grow：0 //这只会填充内容空间
>内容有d性增长：1 //这样即使没有内容也会填满空间
>将所有内容的子项放入一个名为#inner-content的新div中
>你绝对放置#inner-content来填充#content,并允许它滚动.
>田田！@H_419_8@

这是下面的代码：@H_419_8@

@H_419_8@

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

总结

以上是内存溢出为你收集整理的html – 使可滚动div占用剩余高度全部内容，希望文章能够帮你解决html – 使可滚动div占用剩余高度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。