css - Height of div container fitting screen -


i created following layout:

enter image description here

what want achieve is, red , blue container have 100% height inside wrapper. html code far:

@extends('master.main')  <!-- section insert pagetitle --> @section('pagetitle')     title @endsection  <!-- section insert content --> @section('content')     <div class="menu-bar"></div>     <div class="main-content">         <div class="row row-no-padding">             <div class="col-md-7">                 <div class="content-container-left">test</div>             </div>             <div class="col-md-5">                 <div class="content-container-right">test</div>             </div>         </div>     </div> @endsection 

and styling:

#main-content-wrapper {   height: 100%;   margin-left: 60px;   background-color: #f7f8f9; }  .main-content {   margin-left: 15px;   width: 100%;   height: 100%; }  .content-container-left {   background-color: red;   float: left;   width: 100%;   padding: 15px; }  .content-container-right {   background-color: blue;   float: left;   width: 100%;   padding: 15px; }  .row-no-padding {   [class*="col-"] {     padding-left: 0 !important;     padding-right: 0 !important;   } } 

i tried understand logic how achieve this, still have issues not have experience yet that. thought height setting of 100%, not work. not understand why that?

if parent element static height auto. if have parent element position: absolute , set fix height see 100% means fill height of parent of block element.

please note default block level element position static (example div, h1, h2).

please documentation: http://www.w3.org/tr/css2/visudet.html#the-height-property


Comments

Popular posts from this blog

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - UML - How would you draw a try catch in a sequence diagram? -

c++ - No viable overloaded operator for references a map -