垂直擴展div容器以適應另一個

我在其他問題中嘗試了很多示例，但似乎沒有一個適用於我。我只是試圖創建一個邊欄寬度爲100px的div容器，並且如果它動態增長，它將隨容器垂直展開。見下文;內部的div只是當我設置高度爲100％垂直擴展div容器以適應另一個

enter image description here

我的CSS看起來這甚至不會成長;

<style> 
    #outer { 
     border:10px solid #7A838B; 
     margin:10px; 
     border-radius:30px; 
     max-width:500px; 
     min-height:200px; 
    } 

    #leftblock { 
     background-color:#7A838B; 
     width:100px; 
     height:auto; 
     border-top-left-radius:20px; 
     border-bottom-left-radius:20px; 
     margin-left:-10px; 
     margin-top:-10px; 
    } 
    #inner { 
     color:white; 
     height:100%; 
    } 
    </style>

和我的HTML是這樣的;

<div id="outer"> 
     <div id="leftblock"> 
      <div id="inner"> 
       Test 
      </div> 
     </div> 
    </div>

來源

2014-08-31 Alastair W

你有100％身高的孩子。完全是什麼高度的100％？家長沒有身高，而祖父母只有一個最小高度組。（這與設置高度不一樣）如果你可以更具體一點你想要內部div的高度，那麼我可能會多一點幫助。但是現在，您基本上將高度設置爲0的100％。 – Antiga 2014-08-31 00:42:25

謝謝您的回覆。正如我在描述中所說的，我試圖將左側的塊設置爲相同的高度，即觸摸祖父母容器的頂部和底部。我不希望祖父母容器小於200像素，所以我設置了最小高度。父級（左側塊）容器設置爲根據內部塊延伸到什麼高度自動擴展。即使我將所有三個都設置爲100％，內部塊仍保持在文本的高度。 – 2014-08-31 01:14:26

它去爲@mmeverdies說，

爲了設置高度：100％，家長必須建立一個定義的高度太多，但如果高度屬性值是「繼承」，則祖父母必須將其。等等。

你基本上有兩個選擇，要麼：

1）定義父元素的確切高度。那麼100％的孩子身高就會起作用。

2）用position: absolute這樣拉伸子元素：http://jsfiddle.net/r02nbmd9/ - 注意父子代的position: relative和孩子的position: absolute。

<div class="parent"><div class="child"></div></div> 

<style> 
.parent { 
    position: relative; 
    width: 300px; min-height: 200px; 
    background: yellow; 
} 
.child { 
    position: absolute; top: 0; bottom: 0; 
    width: 100px; 
    background: red; 
} 
</style>

來源

2014-08-31 04:29:52

你是明星！工作過一種享受。謝謝！ – 2014-08-31 20:53:17

爲了設置高度：100％，家長必須建立一個定義的高度太多，但如果高度屬性值是「繼承」，則必須祖父母設置。等等。

瞭解它看看這個CSS。

例如：瀏覽器的全高。

html, body { 
    height: 100%; 
} 
#outer { 
    height: 100%; 
} 
#leftblock { 
    height: 100%; 
} 
#inner {  
    height:100%; 
}

默認情況下，HTML高度爲0的話，你必須高度財產比至少一名家長的「繼承」設置爲其他。

來源

2014-08-31 04:07:48

垂直擴展div容器以適應另一個

回答

相關問題