Question

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

<!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://img5.imageshack.us/img5/9440/outputcss2.png

但是当我将所有高度改为100％高度时，它不起作用。输出像这样改变

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

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

关心，

Answer 1

我认为你的问题与内部左侧和内侧右侧都是包含div中的浮动元素这一事实有关。如果将以下内容添加到样式表中：

#inside-bottom{
    clear:both;
}

然后在右下方的div定义下方添加以下内容：

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

你会得到更好的结果。

Answer 2

我编写CSS已经有一段时间了，但是没有办法打开滚动条？这会有用吗，并使该框可滚动。

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

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

Answer 3

中的CSS内容

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

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

告知您是否正确

谢谢

CSS高度100％仍然溢出

3 个答案: