我有一个有两列的布局 - 左边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{ …a:hover{
cursor:url(files/link.cur),progress;
}
body{
width:80%;
background-color:rgba(255,255,255,0.75);
margin:auto;
height: 100%;
min-height: 100%;
}
html{
Background-color:#8888FF;
background-image:url(files/bg.jpg);
background-attachment:fixed;
background-position:center;
background-size:cover;
height:100%;
}
html, body{
cursor:url(files/cursor.cur),progress;
}
iframe{
overflow:hidden;
height:80%;
width:100%;
border-width:1px;
}
img{
display:block;
margin-left:auto;
margin-right:auto;
width:90%;
}
p{
margin-right:10px;
margin-left:10px;
text-align:center;
font-family:calibri;
font-size:16px;
}
#menu a{
display:inline-block;
background-color:#0066FF;
text-decoration:none;
font-family:calibri;
color:#FFFFFF;
padding:10px 10px;
}
#menu a:hover{
background-color:#00AAFF;
}
a.active{
background-color:#0088FF !important;
}
a.active:hover{
background-color:#00AAFF !important;
}<!DOCTYPE html>
<html>
<head>
<title>
Foto's
</title>
<link rel="icon" type="image/png" href="files/icon.png">
<link rel="stylesheet" href="style.css">
<script …