在获得的背面这个问题 https://stackoverflow.com/questions/21159136/on-a-web-page-how-can-i-create-a-horizontal-scroll-instead-of-having-this-wap-t回答说,我有一个看起来像这样的页面。
<div style="white-space: nowrap;">
<span style="display: inline-block; width: 280px">...</span>
<span style="display: inline-block; width: 280px">...</span>
<span style="display: inline-block; width: 280px">...</span>
<span style="display: inline-block; width: 280px">...</span>
</div>
如果该页面有很多跨度,则不会换行,它将继续在页面上水平移动,并给我一个水平滚动条。在每个跨度内我都有一个 html 表,但我不确定这对于问题是否重要。
这很有效,但当其中一个跨度垂直非常长而其他跨度很短时,我遇到了一个问题,因为您必须垂直向下滚动才能真正看到水平滚动条。我正在尝试找出一种方法来解决此问题,以便无论特定跨度部分的垂直长度有多长,水平滚动条始终在页面上可见。
举个例子,如果你看一下 trello(见下面的屏幕截图)。如果你有一个非常长的垂直部分,它会在该部分上添加一个垂直滚动条,这样整个页面就不需要向下滚动。
就我而言,每个跨度内都有一个 html 表。仅针对该表(而不是整个页面)实现垂直滚动条的推荐方法是什么?
你需要一个max-height
and overflow-y
在内部元素上,您需要在外部元素上设置尺寸:
HTML
<div class="outer">
<div class="inner">foo</div>
<div class="inner">bar</div>
<div class="inner">whatever</div>
</div>
CSS
.outer {
border: 2px solid red;
float:left;
top:0;
bottom:0;
position:absolute;
}
.inner {
max-height:100%;
overflow-y:auto;
border: 2px solid blue;
width:30%;
margin-right:2%;
float:left;
}
这是一个工作小提琴 http://jsfiddle.net/TexasBrawler/4cRLV/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)