自動展開DIV高度

alt text http://www.freeimagehosting.net/uploads/a33d47cb87.jpg 自動展開DIV高度

<html><head><title>Test</title> 
<style> 
.main{width:600px;border:1px solid red; } 
.main .left{background:lightblue; width:100px;clear:both; float:left;} 
.main .right{margin-left:100px;background:lightyellow; } 
</style> 
    </head><body> 
<div class="main"> 
    <div class="left"> 
    title 
    </div> 
    <div class="right"> 
     <div id="item">item</div> 
     <div id="item">item</div> 
     <div id="item">item</div> 
     <div id="item">item</div> 
     <div id="item">item</div> 
     <div id="item">item</div> 
     <div id="item">item</div> 
    </div> 
</div> 
</body></html>

如何更改CSS使頁面顯示類似的對話節目嗎？

PS，我認爲這是一種讓「左」div的高度在「右」div或父div的高度展開時自動展開的方法，但我不知道如何。

來源

2010-04-14 Geln Yang

可能重複[CSS - 展開子DIV高度父母的身高（http://stackoverflow.com/ question/4804581/css-expand-child-div-height-to-parents-height） – dynamic 2012-11-20 23:22:24

我有一個非常簡單的解決方案。使用CSS屬性display: table-cell;在.left{} & .right{}風格是這樣的：

.left, .right { 

     display: table-cell; 
     width:100px; 
     vertical-align:middle; 
     text-align:center; 

    }

觀看演示：http://jsfiddle.net/rathoreahsan/qcCPG/3/

的

來源

2011-07-17 21:13:05

謝謝！它的工作原理和添加html文檔的DOCTYPE定義是必要的。 – 2011-08-09 06:29:37

@Ahsan：它不適用於webkit瀏覽器！ – logan 2014-02-24 18:37:36

這裏是完全不同風格的作品：

.main{width:600px;border:1px solid red; height:auto; position:relative } 
.main > div {display:inline-block; vertical-align:top; } 
.main .left{background:lightblue; width:100px; height: 100%; } 
.main .right{margin-left:5px; background:lightyellow; height: 100% }

您可能想通過這個CSS tutorials在W3School。

來源

2010-04-14 17:39:23 Pablo

非常感謝，它離我想要的更近一步。希望它會像正確的div的高度是自動的，當有更多的內容時擴展，左div的高度會自動擴展到等於正確的。 – 2010-04-15 01:49:19

現在我知道只有當主div的高度可以計算出來時，左div'height才能自動展開。 – 2010-04-16 01:35:12

自動展開DIV高度

回答

相關問題