容器內部的CSS多個div使得頁面延伸出高度100％

Question

I m googling, coding but can t爲我的問題尋找解決方案。我有容器設置爲100％的高度，其中包含另一個100％的容器，也有兩個固定高度的div，混淆了將所有內容放在一個屏幕中而不需要滾動的整個想法。 https://jsfiddle.net/6jk91tnq/

Answer 1

看來你的印象是height: 100%意味着填補空間下，然而，它的意思是「高度設置爲其父容器的100％」。

在你的例子中，你有兩個100％高度的容器div。外面的那個身高爲其父（身體）的100％。內部容器具有其父級的100％高度，這是之前的容器 - 實質上，您有一個內部div，可以告訴您「匹配整個頁面的高度」。

如果你想要的東西堅持頁面的底部（並忽略其他所有元素），你可以把它拿出來流動的，有力使用position: absolute; bottom: 0;

Answer 2

外面的容器應該是它定位只有一個具有100％的孩子的div應小於

<div style="height:100%"> 
<div style="height:90%;"/*or any value <100%, that is appropriate for your design */></div> 
<div> 

這意味着該外層div將是屏幕尺寸，並且內DIV將是90％的任何的父DIV是，

如果你會寫這樣的事情

<div style="height:50%"> 
<div style="height:100%"></div> 
<div> 

的div容器只能覆蓋一半的網頁，但內股利將覆蓋外層div的所有高度，其母公司的大小，其100％。

通過這個我的意思是你應該降低第一個子div的高度尺寸來實現你的小提琴中的一個傳呼機，