爲什麼innerContainer不能填充外部容器？

我想創建一個書寫區域和一個消息區域，我在窗口的當前高度上獲取我的容器，但是當我嘗試將容器拆分爲兩部分時，內部容器不會填充外部容器。爲什麼innerContainer不能填充外部容器？

問題：我如何得到#message元素適合#chatContainer減去#writingBox高度？

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    color: #393939; 
 
    font-family: 'Lato', sans-serif; 
 
    -ms-box-sizing: border-box; 
 
    -o-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
#chatContainer { 
 
    cursor: default; 
 
    position: relative; 
 
    height: auto; 
 
    min-height: calc(100% - 54px); 
 
    padding: 54px 0 0 0; 
 
    background: lightgray; 
 
} 
 

 
#messages { 
 
    cursor: default; 
 
    position: relative; 
 
    height: auto; 
 
    min-height: calc(100% - 54px); 
 
    background: lightgreen; 
 
} 
 

 
#writingBox { 
 
    border-top: 1px solid #393939; 
 
    height: 54px; 
 
    background: lightblue; 
 
}

<div id="chatContainer"> 
 
    <div id="messages"></div> 
 
    <div id="writingBox"> 
 
    <div id="newMessage"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-03-17 DomeTune

問題是你不能設置一個高度，如果父容器只有一個最小高度設置就可以了。在min-height

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    color: #393939; 
 
    font-family: 'Lato', sans-serif; 
 
} 
 

 
#chatContainer { 
 
    cursor: default; 
 
    position: relative; 
 
    min-height: 100%; 
 
    padding: 54px 0 0 0; 
 
    background: lightgray; 
 
    box-sizing: border-box; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
#writingBox { 
 
    border-top: 1px solid #393939; 
 
    height: 54px; 
 
    background: lightblue; 
 
} 
 

 
#messages { 
 
    cursor: default; 
 
    position: relative; 
 
    background: lightgreen; 
 
    flex-grow: 1; 
 
}

<div id="chatContainer"> 
 
    <div id="messages"></div> 
 
    <div id="writingBox"> 
 
    <div id="newMessage"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-03-17 10:39:10 Pete

謝謝，我不知道這一點。漂亮的解決方案，顯示器柔性，我總是害怕'flex'屬性。 – DomeTune

哇，它甚至可以用外部div來顯示它。 [JsFiddle示例]（https://jsfiddle.net/7oreb9ud/）！ – DomeTune

這是相當不錯，易於使用。這裏有幾個有用的鏈接：[playground]（http://codepen.io/enxaneta/pen/adLPwv），[flex guide]（https://css-tricks.com/snippets/css/a-guide- flexbox /） – Pete

變化100%到100vh：

您可以使用Flexbox的達到你想要的東西。

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    color: #393939; 
 
    font-family: 'Lato', sans-serif; 
 
    -ms-box-sizing: border-box; 
 
    -o-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
#chatContainer { 
 
    cursor: default; 
 
    position: relative; 
 
    height: auto; 
 
    min-height: calc(100vh - 54px); 
 
    padding: 54px 0 0 0; 
 
    background: lightgray; 
 
} 
 

 
#messages { 
 
    cursor: default; 
 
    position: relative; 
 
    height: auto; 
 
    min-height: calc(100vh - 108px); 
 
    background: lightgreen; 
 
} 
 

 
#writingBox { 
 
    border-top: 1px solid #393939; 
 
    height: 54px; 
 
    background: lightblue; 
 
}

<div id="chatContainer"> 
 
    <div id="messages"></div> 
 
    <div id="writingBox"> 
 
    <div id="newMessage"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-03-17 10:41:53 aje

我沒有考慮將容器設置爲全高清，也許它會顯示在另一個div中。這種方法對我無效。 – DomeTune

您可以設置高度爲您#chatContainer是鈣（100％ - 55像素）和高度#messages是鈣（100％ - 55像素）

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    color: #393939; 
 
    font-family: 'Lato', sans-serif; 
 
    -ms-box-sizing: border-box; 
 
    -o-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
#chatContainer { 
 
    cursor: default; 
 
    position: relative; 
 
    height: calc(100% - 55px); 
 
    min-height: calc(100% - 55px); 
 
    padding: 54px 0 0 0; 
 
    background: lightgray; 
 
} 
 

 
#messages { 
 
    cursor: default; 
 
    position: relative; 
 
    height: calc(100% - 55px); 
 
    background: lightgreen; 
 
} 
 

 
#writingBox { 
 
    border-top: 1px solid #393939; 
 
    height: 54px; 
 
    background: lightblue; 
 
}

<div id="chatContainer"> 
 
    <div id="messages"></div> 
 
    <div id="writingBox"> 
 
    <div id="newMessage"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-03-17 10:42:02 vadber

你幾乎明白了，但我需要滾動才能看到寫字框，這應該是可見的。 – DomeTune

我更新了答案，您必須將#chatContainer的高度設置爲calc（100％ - 54px） – vadber

將邊框更新爲-55px :-) Upvote unming – DomeTune

爲什麼innerContainer不能填充外部容器？

回答

相關問題