在div中的两个水平div'流体的高度

我不是一个网页设计师..我只是一个asp.net程序员，我很难与IE7。嗯，我设法在IE8，IE9和Chrome中工作。现在我必须让它在IE7中工作。在div中的两个水平div'流体的高度

首先，这是我的源

我使用DOCTYPE HTML PUBLIC “ - // W3C // DTD XHTML 1.0过渡// EN”“http://www.w3.org/TR/xhtml1/DTD /xhtml1-transitional.dtd”

和HTML的xmlns = “http://www.w3.org/1999/xhtml” LANG = “こ” 的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％。所有外部divs的位置都是固定的。我给了内部两个divs的位置相对，并给予了两个50％的高度。它在IE8,9，Chrome中运行良好。

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

那么你们可以给我一些帮助吗？

谢谢你！

来源

2012-04-20 Tom Kim

如果切换到什么严格的doctype？它会解决这个问题吗？ – fcalderan 2012-04-20 14:07:15

有关实验，请参阅以下资源：http://jsfiddle.net/developdaly/hjkZm/ – developdaly 2012-04-20 14:21:12

@F。 Calderan :(嗯，也许这将工作，但XHTML 1.0是唯一的DOC类型我可以使用 – 2012-04-20 14:24:03

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

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

来源

2012-04-20 14:21:53 pharalia

嗯......但我确实需要东西的大小固定在相同的高度。 – 2012-04-20 14:26:10

在div中的两个水平div'流体的高度

回答

相关问题