小编Lon*_*yen的帖子

这是jsfiddle的例子

这是html:

<div class="header">header</div>
    <div class="wrapper">
        <div class="left"><div class="content"></div></div>
        <div class="right">right</div>
    </div>

这是css:

.left{
position:absolute;
width:30%;
background:red;
left:0;
height:100%;
display:block;
padding:5px;
}
 .right{
overflow:hidden;
background:green;
position:absolute;
right:0;
width:70%;
height:100%;
}

html, body{
min-height:100%;
height:100%;
padding:0px;
margin:0px;
position:relative;
}

body {position:relative;}

.wrapper {
position:relative;
height:100%;
}

.header{
width:100%;
height:100px;
background:yellow;
display:none;
}

.left .content {
background:blue;
height:inherit;
width:100%;
}

您可以看到红色div被蓝色div推出.我怎么能防止这种情况？所有宽度和高度均基于%.我知道的唯一方法是给红色div一个固定的宽度.我还有其他方法可以用%来完成吗？

我想在IBM网站上显示一个覆盖div的顶部div,类似于这种效果:http://www.ibm.com/us/en/

请查看页脚附近的3个框.将鼠标悬停在"让我们构建一个更智能的星球"框中以查看效果.