限制flex内容器的高度不要增加到超过CSS可用页面上的可用空间
旋钮
编辑：我的例子太复杂了。所以我做了一个简单的。
http://codepen.io/knobo/pen/gaZVoN
.top超出了html元素的可用大小。我不希望当前视口之外的任何内容为100vh，但是我不知道.bottom的高度会有所不同。
这行代码：max-height：calc（100vh-60px）; 使它看起来像这样。但这不是，因为我不知道.bottom的高度，我刚刚估计为60px；
<div class="page">
<div class="top">
<div class="left">Some text</div>
<div class="right">
<img src="http://placehold.it/350x1800">
</div>
</div>
<div class="bottom">
<button>Click</button>
<button>Click</button>
<button>Could be several lines</button>
</div>
</div>
html, body {
max-height: 100vh;
}
的CSS
.page {
display: flex;
flex-direction: column;
height: 100%;
}
.top {
flex: 1 1 auto;
display: flex;
overflow: hidden;
max-height: calc(100vh - 60px);
/*
I don't know the height of .bottom
It can change when browser is resized too..
How do I solve this.
*/
}
.left {
flex: 1 1 auto;
}
.bottom {
padding: 10px;
flex: 1 1 auto;
background-color: teal;
}
EDIT2 ：（包含来自第一个版本的原始链接）http://codepen.io/knobo/pen/epboBv（css版本。不起作用）http://codepen.io/knobo/pen/wKRNjr/（js版本。但是我想知道如何使用CSS。）
EDIT3截图：
当浏览器窗口小时，div.right太大时，底行消失。 
当浏览器窗口很大时，所有内容都会正确显示 
这是应该的方式：div.top缩小，并且底部行仍然可见。我能够用JavaScript做到这一点。我想CSS也应该有可能。
旋钮
该解决方案非常简单。
.right {
position: relative;
/* width: Do something with width here. */
}
.nooverflow {
position: absolute;
}
然后用class =“ nooverflow”包装.right的内容
<div class="right">
<div class="overflow">
{{ Content of .right }}
</div>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
在AuthorizeNet中将付款资料限制增加到超过10个
- 2
无法将打开文件的限制增加到超过4096（Ubuntu）
- 3
当使用float：left和float：right时，将容器的高度增加到最高元素
- 4
UWP ListView 占用的高度超过可用高度
- 5
内存可用空间正在减少，但可用空间正在增加
- 6
在主窗口中增加可用空间
- 7
可滚动元素限制为可用高度
- 8
UITableViewCell高度基于可用的屏幕空间
- 9
将菜单宽度增加到页面大小
- 10
是否有一种 CSS 方法可以缩放图像以填充 A4 页面上其他两个块级元素之间的可用空间？
- 11
显示更多按钮可将内容增加到完整大小
- 12
使元素消耗容器中的可用空间
- 13
在页面上端显示“也在AppStore中也可用”
- 14
无法点击页面上可用的按钮
- 15
当内容超出可用高度时，使div滚动
- 16
根据可用高度分配行内容
- 17
如果页面上的元素不可用但不失败退出，则不要运行黄瓜功能
- 18
试图通过内容增加父容器的高度
- 19
使用CSS或jQuery将宽度从0增加到100％
- 20
为什么docker的cpus可用数量超过我设置的限制？
- 21
从可用空间创建分区-不能创建超过4个分区
- 22
从可用空间创建分区-不能创建超过4个分区
- 23
内存增加到画布
- 24
如何将Google自定义搜索配额增加到超过10000个？
- 25
CSS置顶-如何置顶以填充可用高度？
- 26
添加内容时，如何使容器的高度增加而不是增加？
- 27
让CSS网格行填充可用空间
- 28
CSS填充父级可用空间
- 29
CSS 网格自动跨越可用空间
我来说两句