我正在尝试根据页面大小制作textarea比例.即我正在尝试使textarea填充第二个容器和页脚之间的空间.
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%;
}
我该怎么做才能让textarea填充空间(缩放到页面)？
谢谢.
解决方法
将textarea宽度设为100％,
<textarea disabled style="width:100%" ></textarea>
