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％的問題

回答

相關問題