innerContainerが外部コンテナを埋めていないのはなぜですか？

Question

書込み領域とメッセージ領域を作成したい場合は、現在の高さでコンテナを取得しますが、コンテナを2つの部分に分割しようとすると、内側のコンテナが外側のコンテナをいっぱいにしません。

質問#chatContainerから#writingBoxの高さを差し引いた#message要素を取得するにはどうすればよいですか？

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>

Answer 1

問題は、親コンテナは、それだけに設定された分の高さを持っている場合は、高さを設定することはできませんです。

あなたが望むものを達成するためのフレキシボックスを使用することができます。

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>

Answer 2

変更100%を100vhにmin-heightに。

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>

Answer 3

あなたはカルク（100％ - 55×）であるためにあなたの#chatContainerのための高さを設定することができます -

をし、CALC（55×100％）であること#messagesのための高さ

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>