我有一个有两列的布局 - 左边div和右边div.
右边div有灰色background-color,我需要它根据用户浏览器窗口的高度垂直展开.现在是background-color最后一段内容的结尾div.
我试过了height:100%,min-height:100%;等等
我有一个非常奇怪的问题...在每个浏览器和移动版本中我遇到这种行为:
怎么能避免这个问题？当我第一次听到视口高度时,我很兴奋,我认为我可以将它用于固定高度块而不是使用javascript,但现在我认为唯一的方法是实际上javascript与一些resize事件......
任何人都可以帮我/建议一个CSS解决方案吗？
简单的测试代码:
/* maybe i can track the issue whe it occours... */
$(function(){
var resized = -1;
$(window).resize(function(){
$('#currenth').val( $('.vhbox').eq(1).height() );
if (++resized) $('#currenth').css('background:#00c');
})
.resize();
})*{ margin:0; padding:0; }
/*
this is the box which should keep constant the height...
min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
min-height:100vh;
position:relative;
}
.vhbox .t{
display:table;
position:relative;
width:100%;
height:100vh;
}
.vhbox .c{ …在JavaScript标记和HTML中使用CDATA有什么用？
<script type="text/javascript">
// <![CDATA[
// ]]>
</script>