Question

以下是代码：

<!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>

我的目标是让填充红色容器底部的蓝色和黄色div 。（确保以最小宽度查看小提琴。）

有什么想法吗？

Answer 1

首先让孩子与父母一样高。这将保证它们至少流向其父母的底部。如果他们的开头低于他们父母的顶部，他们将溢出通过他们父母的底部。

#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;  
}

然后在父级上使用overflow：hidden属性来隐藏溢出的子级。

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

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

1 个答案: