div中有两个水平div的流体高度

时间:2012-04-20 13:59:17

标签: css html nested height

我不是网页设计师..我只是一名asp.net程序员,我在IE7上遇到了困难。 好吧,我设法在IE8,IE9和Chrome中运行我想要的东西。 现在我必须让它在IE7中运行。

首先这是我的来源

我正在使用DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

和html xmlns =“http://www.w3.org/1999/xhtml”lang =“ko”xml:lang =“ko”

<style type="text/css">
    html {
    height: 100%
}
body {
    background-color: #5c87b2;
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
    border: 0;
    overflow: visible;
    height: 100%; 
    max-height: 100%;
}
</style>

<div id="header" style="
                        display:block;
                        position:fixed;
                        height:50px; width:100%;
                        background-color:red;">
                        d

</div>
<div id="menu" style="
                        display:block;
                        position:fixed;
                        width:200px;
                        top:50px; left:0; right:auto; bottom:0;
                        background-color:blue;">
                        d

</div>
<div id="button" style="
                        display:block;
                        position:fixed;
                        width:auto; height:100px;
                        top:50px; left:200px; right:0; bottom:auto;
                        background-color:Yellow;">
                        d
</div>
<div id="content" style="
                        display:block;
                        position:fixed;
                        width:auto; height:auto;
                        top:150px; left:200px; right:0; bottom:0;
                        background-color:green;">
    <div style="
                position:relative;
                height:50%;
                min-height:50%;
                border:3px solid pink;
                ">12412
    </div>
    <div style="
                position:relative;
                height:50%;
                border:3px solid white;
                ">
                2214124
    </div>
</div>

所以我有一个标题(红色),左侧菜单(蓝色),子标题(黄色),容器(绿色) 我需要容器中的两个div(粉色,白色边框)。 他们需要100%垂直填充容器。 所有外部div的位置都是固定的。 而且我给了内部两个div的位置相对而且两个都给了50%的高度。 它在IE8,9,Chrome中运行良好。

我不会使用脚本。只尝试使用css样式。

那么你们可以帮我一些吗?

谢谢你!!!!!

1 个答案:

答案 0 :(得分:0)

在外部#content div上设置高度允许内部div显示在其他浏览器中。当您正在寻找全屏面板设置时,我不确定如何使用像素值实现此目的。从px更改为%并指定定位和宽度/高度作为流体似乎在IE7中实现了预期的效果。

http://jsfiddle.net/VCztH/3/