<!DOCTYPE html>
<html>
	<head>
    	<title>CSS Height</title>
    </head>
    <body>
    	
        <style type="text/css">
        	  .first_box_height{
				 height:100px;
				 width:100%;
				 color: #FFF;
				 background: #0099da;
			  }
			  .second_box_height{
				 height:30%;
				 width:100%;
				 color: #FFF;
				 background: #0099da;
			  }
			  .third_box_height{
				 height:5em;
				 width:100%;
				 color: #FFF;
				 background: #0099da;
			  }
			  .fourth_box_height{
				 height:auto;
				 width:100%;
				 color: #FFF;
				 background: #0099da;
			  }
        </style>
        
        <div class="first_box_height"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>
		<br />
		<div class="second_box_height"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>
		<br />
		<div class="third_box_height"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>
		<br />
		<div class="fourth_box_height"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>
        
    </body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'}),_trfd.push({'ap':'cpsh'},{'server':'sg2plcpnl0084'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js'></script></html>

Output :

Topic : CSS Height