如何使div填充整个父母的高度？

Question

I have this design https://jsfiddle.net/49hsztuh/ 我有这个设计https://jsfiddle.net/49hsztuh/

Here is the code: 这是代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<style>
@charset "utf-8";
html,body {
    height:100%;
    width:100%;
}

.chatContainer {
    font-family:Nunito; 
    font-size:0.9em;
    background-color:red;
    height:800px;
}
.chatHeader {
    height:50px;
    background-color:#363b3f;
    color:white;
    padding-left:10px;
}

#myWebcamDiv {
    height:260px;
    width:100%;
    background-color:black;
    padding:0px;
}

#chatUsers {
    margin-top:10px;
    overflow-y:scroll;
    overflow-x:hidden;
    width:100%;
    height:320px;
    background-color:blue;
}
#chatCams {
    width:100%;
    background-color:#FeFeFe;
    padding:0px;
    display:inline-block;
    overflow-y:hidden;
    overflow-x:auto;
    white-space: nowrap;

}
.chatText {
    height:250px;
    padding:10px;
    background-color:yellow;
    color:black;
    overflow-x:none;
    overflow-y:scroll;
}

</style>

</head>

<div class="col-md-12 chatContainer">

    <div class="chatHeader"></div>
    <div class="col-md-4" id="chatLeftColumn" >
        <div id="myWebcamDiv"></div>        

        <div id="chatUsers"></div>        
    </div>

    <div class="col-md-8" id="chatRightColumn">
        <div id="chatCams"></div>       
        <div role="tabpanel">

          <!-- Nav tabs -->
          <ul id="pageTab" class="nav nav-tabs" role="tablist">

          <li class="active">
          <a  href="#LoungeRoom" role="tab" data-toggle="tab">LoungeRoom</a></li></ul>

          <!-- Tab panes -->
          <div id="pageTabContent" class="tab-content">
            <div role="tabpanel" class="tab-pane active chatText" id="LoungeRoom"></div>
            <div class="tab-pane chatText" id="LoungeRoom"></div>
          </div>

        </div>    


        <div id="chatInputDiv"></div>            

    </div>

</div>

My goal is to make the blue and yellow divs filled up to the bottom of the red container . 我的目标是让蓝色和黄色的div填充到红色容器的底部 。 (make sure you view the fiddle with a min width). （确保以最小宽度查看小提琴）。

Any idea ? 任何想法？

Answer 1

Start by giving the children the same height as their parent. 首先让孩子与父母一样高。 This will guarantee they flow at least until the bottom of their parent. 这将保证它们至少流向其父母的底部。 If they start lower than their parent's top, they will overflow passed the bottom of their parent. 如果它们的开头低于其父级的顶部，它们将溢出通过其父级的底部。

#chatUsers {
    margin-top:10px;
    overflow-y:scroll;
    overflow-x:hidden;
    width:100%;
    height:800px; /* height of parent */
    background-color:blue;
}

.chatText {
    height:800px; /* height of parent */
    padding:10px;
    background-color:yellow;
    color:black;
    overflow-x:none;
    overflow-y:scroll;  
}

Then use the overflow:hidden property on the parent to hide the overflowing children. 然后在父级上使用overflow：hidden属性来隐藏溢出的子级。

.chatContainer {
    font-family:Nunito; 
    font-size:0.9em;
    background-color:red;
    height:800px;
    overflow: hidden; /* hide overflow */
}

如何使div填充整个父母的高度？

问题描述

1 个解决方案

解决方案1
0 2015-02-15 01:46:27

如何使div填充整个父母的高度？

问题描述

1 个解决方案

解决方案1 0 2015-02-15 01:46:27

解决方案1
0 2015-02-15 01:46:27