css height 100％问题

本文介绍了css height 100％问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

目前，我有一个像这样的代码

Currently, I have a code like this

<!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>

输出如下。

目前，内容是在框内，因为它还没有到达。但是当内容超过高度。它会是这样的。因为我设置了固定的高度。

Currently, content is inside the box because it's not reach yet. But when content is exceed the height. It is going to be like this. Because i set the fixed height.

请参阅此图片

但是当我把所有的高度改为100％的高度，它不工作。输出变更如下

But when I change all the height as 100% height, it doesn't work. Output is changed like this

任何人都可以帮我解决这个问题吗？非常感谢。

Can anyone help me to fix it ? Thanks much.

有关问题，

imageshack

css height 100％问题

问题描述

推荐答案