CSS高度100％的问题

目前，我有这样的CSS高度100％的问题

<!DOCTYPE HTML PUBLIC "-// W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd"> 
<html><head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<style type="text/css"> 
body { 
background:#000; 
} 

#header{ 
    float:right; 
    width:800px; 
} 

#topbar { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 30px; 
} 

#container-box{ 
    margin:0px auto; 
    border:1px solid black; 
    width:950px; 
    margin-top:40px; 
    height:550px; 
} 

#image-box{ 
    border:3px solid Black; 
    position:absolute; 
    float:left; 
    width:120px; 
    height:120px; 
    z-index:1000; 
    background:#000099; 
} 

#inside-box{ 
    z-index:-100; 
    margin:0px auto; 
    border:1px solid #737373; 
    width:900px; 
    margin-top:50px; 
    height:100%; 
} 

#inside-left{ 
    float:left; 
    border-right:1px solid #737373; 
    width:250px; 
    height:100%; 
    text-align:bottom; 
} 

#inside-right{ 
    float:right; 
    width:649px; 
    color:#FFFFFF; 
} 

#right-top{ 
    float:left; 
    width:649px; 
    height:375px; 
    border-bottom:1px solid #737373; 
} 

#right-btm{ 
    float:left; 
    padding-top:5px; 
    width:649px; 
    height:150px; 
} 

#footer{ 
    color:#c3c3c3; 
} 
#footer #footer_left{ 
    float:left; 
    width:200px; 
    font-size:9px; 
    margin-top:5px; 
    margin-left:30px; 
    text-align:left; 
} 

#footer #footer_right{ 
    float:right; 
    width:500px; 
    font-size:14px; 
    margin-right:30px; 
    margin-top:5px; 
    text-align:right; 
} 
#footer #footer_right .linkage{ 
    float:right; 
    margin-right:20px; 
} 


#footer #footer_right .linkage a{ 
    color:#c3c3c3; 
    text-decoration:none; 
} 

</style> 
</head> 
<div id="header"> 
<div id="topbar"></div> 
</div> 

<div id="container-box"> 
    <div id="image-box"></div> 
    <div id="inside-box"> 
     <div id="inside-left"> 
      <table width="100%" cellspacing="15px" height="100%"> 
       <tbody><tr valign="bottom"> 
        <td> 
                <div class="elements"></div> 
               <div class="elements"></div> 
        </td> 
       </tr> 
      </tbody></table> 
     </div> 
     <div id="inside-right">The inner German border was the frontier between the German Democratic Republic (East Germany) and the Federal Republic of Germany (West Germany) from 1949 to 1990. Not including the similar but physically separate Berlin Wall, the border was 1,381 kilometres (858 mi) long and ran from the Baltic Sea to Czechoslovakia. It was formally established on 1 July 1945 as the boundary between the Western and Soviet occupation zones of Germany. On the Eastern side, it was made one of the world's most heavily fortified frontiers, defined by a continuous line of high metal fences and walls, barbed wire, alarms, trenches, watchtowers, automatic booby-traps and minefields. The border was a physical manifestation of Winston Churchill's metaphor of an Iron Curtain separating the Soviet and Western blocs during the Cold War. Built by East Germany in phases from 1952 to the late 1980s, the fortifications were constructed to stop the large-scale emigration of East German citizens to the West. It caused widespread economic and social disruption on both sides. On 9 November 1989, the East German government announced the opening of the Berlin Wall and the inner German border. The inner German border was not completely abandoned until 1 July 1990, exactly 45 years to the day since its establishment, and only three months before German reunification formally ended Germany's division. Little remains today of the inner German border's fortifications. The inner German border was the frontier between the German Democratic Republic (East Germany) and the Federal Republic of Germany (West Germany) from 1949 to 1990. Not including the similar but physically separate Berlin Wall, the border was 1,381 kilometres (858 mi) long and ran from the Baltic Sea to Czechoslovakia. It was formally established on 1 July 1945 as the boundary between the Western and Soviet occupation zones of Germany. On the Eastern side, it was made one of the world's most heavily fortified frontiers, defined by a continuous line of high metal fences and walls, barbed wire, alarms, trenches, watchtowers, automatic booby-traps and minefields. The border was a physical manifestation of Winston Churchill's metaphor of an Iron Curtain separating the Soviet and Western blocs during the Cold War. Built by East Germany in phases from 1952 to the late 1980s, the fortifications were constructed to stop the large-scale emigration of East German citizens to the West..</div> 
</div> 

</div> 
</body> 
</html>

输出是这样的代码。

alt text http://img694.imageshack.us/img694/6610/outputcss.png

目前，内容是盒子里面，因为它没有达到。但是，当内容超过高度。它会是这样的。因为我设定了固定的高度。

请参阅此影像

alt text http://img5.imageshack.us/img5/9440/outputcss2.png

但是，当我改变所有的高度为100％的高度，这是行不通的。输出改变这样

alt text http://img200.imageshack.us/img200/3120/outputcss3.png

谁能帮我解决这个问题？非常感谢。

与问候，

来源

2009-11-09 spotlightsnap

我相信你的问题与该办事实上，内部和内部都是正确的t是包含div的浮动元素。如果以下内容添加到您的样式表：

#inside-bottom{ 
    clear:both; 
}

，然后添加正下方的内偏右的div定义如下：

<div id="inside-bottom"></div>

你会得到一个更好的结果。

来源

2009-11-09 06:09:49

跳过' '并使用'

'。否则，浏览器将呈现一些高度的div，因为它必须显示' '。这个明确的div是不可见的。 – 2009-11-09 06:32:39

感谢Gene，它解决了我的问题。但只有一件事，请看这张图片。 http://img200.imageshack.us/img200/9853/outputcss3u.png 但左边框应该是直到底部。但它只在最上面。我该如何解决这个问题？谢谢。 – spotlightsnap 2009-11-09 07:44:00

你的挑战是，没有办法根据另一个浮动div的高度来控制一个浮动div的高度。看看这篇关于2列CSS布局的文章：http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/。请特别注意第7步之前的信息：它描述了替代解决方法以获得您想要的效果。你可能会问自己：这难道不容易吗？答案是肯定的，应该是（尤其是考虑这个问题有多常见），但不幸的是我不相信它。 – 2009-11-11 11:43:27

这已经有一段时间，因为我编写CSS，而不是有没有办法把滚动条上？这是否有用，并使该框可滚动。

更好的是，我认为有一些属性叫溢出。我很确定如果你关闭溢出（在inside-right）它应该解决你的问题。

希望这会有所帮助。对不起，如果我完全错了。

来源

2009-11-09 06:00:35 ServAce85

内的CSS

#inside-box添加{overflow:auto;}

#inside-right添加{border: 1px solid #fff;}

，如果你得到正确的

谢谢告知

来源

2009-11-09 06:02:54 sathish

CSS高度100％的问题

回答

相关问题