箱子尺寸，爲什麼身高> 100％？

我正在嘗試爲簡單面板創建標記。結構如下。其中包含「transcluded」的<div>應填充其父容器<div>。箱子尺寸，爲什麼身高> 100％？

<div class="container"> 
    <div class="container-title">title</div> 
    <div class="container-body"> 
     transcluded 
    </div> 
</div>

正如你可以看到（在http://jsfiddle.net/kAk9Z/）中，「transcluded」身體超出其容器而不是僅填充。

如何讓容器保持其大小，同時填充剩餘空間中的「transcluded」<div>？

來源

2014-05-12 core

這不是一個box-sizing問題，當你聲明高度100％它被稱爲父元素，其中已經包含一個div所以.container的孩子的高度之和爲> 100

的高度

一個解決方案可以是容器主體切換到position: absolute，這裏的小提琴：http://jsfiddle.net/kAk9Z/2/

.container { 
    width: 640px; 
    height: 480px; 
    background-color: #dededd; 
    padding: 4px; 
    position: relative; 
} 

.container-body { 
    background-color: white; 
    border: 1px solid black; 
    padding: 8px; 
    position: absolute; 
    top: 30px; 
    bottom: 4px; 
    right: 4px; 
    left: 4px; 
}

來源

2014-05-12 20:59:34

你爲什麼不設置你的身體內的div高度。這樣它將確定你的容器div的高度，並且你得到你想要的結果。你甚至可以選擇一個最小高度，並在內容需求時增長。事情是這樣的：

.container { 
    width: 640px; 
    background-color: #dededd; 
    padding: 4px; 
} 

.container-body { 
    background-color: white; 
    height: 100%; 
    border: 1px solid black; 
    padding: 8px; 
    min-height: 460px; 
}

和提琴：http://jsfiddle.net/kAk9Z/4/

來源

2014-05-12 21:04:08 Pevara

箱子尺寸，爲什麼身高> 100％？

回答

相關問題