Anonymous Anonymous - 1 month ago
183 0

No description

HTML

Dynamic Resize

<html>
<head>
<style> 
	#parentContainer {
	  border:1px solid red; 
	  height:100%; 
	  width:300px; 
	}

	#d1 {
	  width:300px; 
	  height:300px; 
	  background-color:green; 
	}

	#d2 {
	  width:300px; 
	  height:300px; 
	  background-color:orange;
	}

	@media screen and (max-height:400px) {
	  #parentContainer {
	    height:100%; 
	  }

	  #d1, #d2 {
	    height:50%; 
	  }
	}
</style> 
</head>

<body> 
	<div id="parentContainer">
	  <div id="d1"> </div>
	  <div id="d2"></div>
	</div>
</body>
</html>