css - Height of div container fitting screen -
i created following layout:
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
Post a Comment