CodeMirror填充Div并使Div达到100%的高度

时间:2014-09-24 10:58:23

标签: html css css3 twitter-bootstrap-3 resize

可能是一个已经回答的解决方案,但是所有错误的答案(也就是解答不能解决这个问题的答案),很难找到正确的答案。

问题是这样的---如何使CodeMirror填充100%的父div - 而不强迫页面的其余部分达到100%的高度,因为这会导致以下问题:

使用时

html, body { height: 100%; }

您实际上是在告诉页面整个高度是包含所有内容的整个页面的浏览器的视口。这个问题是,我不希望页面上的所有内容都限制在这个比例。我想做的是,可以正常访问页面而不会破坏响应性(又名,移动等支持),并且页面上仍然有一个div(右侧面板)有一个div,只有div是100%高度---那个div中的空间。我不希望100%的高度溢出到菜单中,在菜单下面/上面等等。它必须留在盒子里。

enter image description here

1 个答案:

答案 0 :(得分:6)

您是否尝试过此属性:

/* Firefox */
height: -moz-calc(100vh - 190px);
/* WebKit */
height: -webkit-calc(100vh - 190px);
/* Opera */
height: -o-calc(100vh - 190px);
/* Standard */
height: calc(100vh - 190px);

使用 calc vh 结合使用,可以将元素的大小约束到可见区域。