CODEWITHSUNDEEP
htmlcss
user4591043
user4591043

Reputation:

height 100% and min-height 100%

i need the third and fourth rectangle to have the same position but fill all the height remaining in % and I cant change the min-height:100% on the body, html. using css, html ,code below.

  html, body{ min-height: 100%; }	
  * { margin: 0;}
	 
  div>div { 
	    float: left;
	    width: 50%; 
	}	 
  .rectangle-one{
		height: 100px;		
		background-color: red;
	}
  .rectangle-two{		  
		height: 100px;		
		background-color: black;
	}
  .rectangle-third{		
		height: 150px;
		background-color: green;
	}
  .rectangle-fourth{	
		height: 150px;
		background-color: yellow;
	}
<!doctype html>

<html>
  
<body>
  <div > 
    <div class="rectangle-one"></div>
    <div class="rectangle-two"></div>
  </div> 
  
  <div > 
    <div class="rectangle-third"></div>
    <div class="rectangle-fourth"></div>
  </div> 
</body>

</html>

Upvotes: 0

Views: 115

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106048

display:table should do:

  html, body { 
        height: 100%;
        width:100%;
    }	
  * { 
        margin: 0;}
  body {
        display:table;  
        table-layout:fixed;
    } 
  body>div {
        display:table-row;
    }
  div>div { 
	    display:table-cell;
	    width: 50%; 
	}	 
  .rectangle-one{
		height: 100px;		
		background-color: red;
	}
  .rectangle-two{		  
		background-color: black;
	}
  .rectangle-third{		

		background-color: green;
	}
  .rectangle-fourth{	

		background-color: yellow;
	}
<!doctype html>

<html>
  
<body>
  <div class="container"> 
    <div class="rectangle-one"></div>
    <div class="rectangle-two"></div>
  </div> 
  
  <div > 
    <div class="rectangle-third"></div>
    <div class="rectangle-fourth"></div>
  </div> 
</body>

</html>

Upvotes: 0

Heri Hehe Setiawan
Heri Hehe Setiawan

Reputation: 1633

Simply wrap the second row columns within a parent with calculated height will do the work.

html,
body {
  min-height: 100%;
}
* {
  margin: 0;
}
div>div {
  float: left;
  width: 50%;
}
.row-first {
  overflow: hidden;
  height: 100px;
}
.row-second {
  position: absolute;
  top: 100px;
  bottom: 0;
  height: calc(100% - 100px);
  width: 100%;
}
.rectangle-one {
  height: 100px;
  background-color: red;
}
.rectangle-two {
  height: 100px;
  background-color: black;
}
.rectangle-third {
  background-color: green;
  height: 100%;
}
.rectangle-fourth {
  background-color: yellow;
  height: 100%;
}
<!doctype html>

<html>

<body>
  <div class="row-first">
    <div class="rectangle-one"></div>
    <div class="rectangle-two"></div>
  </div>

  <div class="row-second">
    <div class="rectangle-third"></div>
    <div class="rectangle-fourth"></div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions