Menu
I am trying to make the textarea scale according to page size. I.e I am trying to make the textarea fill the space between the second container and the footer.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>MySite</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="sticky-footer.css" rel="stylesheet">
</head>
<body>
<div id="wrap">
<div class="container">
<h4 class="well well-sm">My site </h4>
</div>
<div class="container">
<div class="well well-sm">
<div class="btn-group">
<button type="button" class="btn btn-default">Domain</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Test</a></li>
<li><a href="#">Test 2</a></li>
</ul>
</div>
<div class="checkbox inline">
<label>
<input type="checkbox" id="checkBoxError">Error</input>
</label>
</div>
</div>
</div>
<div class="container">
<textarea disabled></textarea>
</div>
</div>
<div id="footer">
<div class="container">
<p class="well well-sm">footer</p>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
CSS (sticky-footer.css):
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
/*background-color: #f5f5f5;*/
}
#mytextbox {
min-height: 100%;
height: auto !important;
width: 100%;
height: 100%;
}
What should I do to make the textarea fill the space (scale to the page)?
Thanks.
489
give textarea width as 100%,
<textarea disabled style="width:100%" ></textarea>
see the fiddle
68
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
