Как сделать div заполнять всю высоту своего родителя?

У меня есть эта конструкция https://jsfiddle.net/49hsztuh/Как сделать div заполнять всю высоту своего родителя?

Вот код:

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

Моя цель состоит в том, чтобы сделать синие и желтые дивы заполнены до нижней части красного контейнера. (убедитесь, что вы просматриваете скрипку с минимальной шириной).

Любая идея?

источник

2015-02-14 yarek

Начните с предоставления детям такой же высоты, как и их родитель. Это гарантирует, что они будут проходить, по крайней мере, до нижней части их родителя. Если они начнут меньше, чем их родительский верх, они переполнят нижнюю часть своего родителя.

#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 */ 
}

источник

2015-02-15 01:46:27

Я установил родительскую высоту как 800px .. но, конечно, может быть другой высоты. Так что это решение недостаточно гибкое! – yarek

Ваш вопрос должен быть задан с использованием гибкой высоты. Взгляните на это: http://css-tricks.com/fluid-width-equal-height-columns/ –

Как сделать div заполнять всю высоту своего родителя?

ответ

Смежные вопросы