css3 - 100% height div in background cover div -


currently have web page background image size of cover. 2 divs inside of div 100% height. these divs need responsive. need leftside div have image sit on bottom. using clearfix on main containers class pic still goes container 1.

html

<div class="main-container1 clearfix"> </div>  <div class="main-container2 clearfix">  <div class="wrapper">   <div class="leftside"><img class="pic" src="image/blank.png" /></div>   <div class="rightside"></div>  </div> </div> 

css

body { height:100%; overflow:scroll; }  .main-container1 { background-image:url(../images/footballfieldblur.jpg); background-position:center center; background-repeat:no-repeat; background-size:cover; min-height:100%;  } .main-container2 { background-image:url(../images/footballfieldblur.jpg); background-position:center center; background-repeat:no-repeat; background-size:cover; min-height:100%;  }  .wrapper { width:90%; margin:0 auto; height:100%; min-height:100%; }  .leftside { width:40%; height:100%; min-height:100%; float:left; position:relative; }  .rightside { width:60%; height:100%; min-height:100%; float:right; position:relative; }  .pic { position:absolute; bottom:0; }  .clearfix:before, .clearfix:after { content: " "; display: table; }  .clearfix:after { clear: both; }  .clearfix { *zoom: 1; } 

alright guys figured out. divs not expanding 100% height of clearfix containers because clearfix class not 100% height.

.clearfix { *zoom: 1; height:100%; min-height:100%; }  

Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

javascript - jQuery .height() return 0 when visible but non-0 when hidden -