p contenteditable height

by adagi developer

HTML

<script src="https://fonts.googleapis.com/css?family=Arimo"></script>
<!DOCTYPE html>


		<title> Test </title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

		
	
			

		

	<body>

	<section>
		<div id="title"> title </div>
		
		<div id="form">
		
		<div class="details">	Name <strong>*</strong>: 														<input type="text" class="input" id="name"> 	<br> </div>
		<div class="details">	Mail <strong>*</strong> : <input type="text" class="input" id="mail"> 		<br> </div>
		<div class="details">	Website:																								<input type="text" class="input" id="name"> 	<br> </div>
	
		<br>
		<div class="details"> Text: 
		<p id="content" contenteditable="true"> Click to write your post. </p>
			<br>		
		</div>
		
		</div>
		
		
		<button id="button" onclick="">Submit</button>
	</section>

	</body>
</html>

CSS

body, html {
				margin: 0;
				padding: 0;
				background-color: white; 
			}	
			
			.input {
				border: 1px dotted black;
				width: 30%;
				float: right;
				left: 45%;
				height: 40px;
				position: absolute;
				background-color: #8CE1FF;
				color: #6E6E6E;
				font-size: 16px;
				font-family: 'Arimo';
			}			
			
			.input:hover {
				border: 1px solid black;			
			}
			
			
			#content {
				border: 1px dotted black;
				width: 50%;
				float: right;
				position: absolute;
				background-color: #8CE1FF;
				color: #6E6E6E;
				font-size: 19px;
				font-family: 'Arimo';
				height: 40%;
			}
			
			#content:hover {
				border: 1px solid black;
			}
			
			.details {
				margin-bottom: 30px;
				z-index: 900;
				font-family: 'Arimo';
				font-size: 17px;
			}
			
			section {
				background-color: #53CFFC;
				margin: 20%;
				z-index: 901;
				border: 1px solid black;
			}
			
			#button {
				color: #C0C0C0;
				margin-top: 5%;
				background: #168CB7;
				border: 1px solid #0C8FBF;
				height: 40px;
				width: 100%;
				font-family: 'Arimo';
				font-size: 20px;
				position: relative;
			}			
			
			#title {
				height: 40px;
				text-align: center;
				font-family: 'Arimo';
				font-size: 20px;
				background: #168CB7;
				color: #C0C0C0;
			}
			
			#form {
				padding: 4%;
			}

JavaScript

//JavaScript c: