我是 HTML 新手。
我想有两个文本区域:top 和 bottom。
我需要 bottom 位于其选项卡的底部，高度为 5 行。 top 必须占据剩余空间。在宽屏幕中，它不会按应有的方式显示。
我该如何实现？
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li><a href="#tasks" data-toggle="tab">tasks</a></li>
<li><a href="#save" data-toggle="tab">save</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tasks">
<div style="width:100%;height:100%">
<textarea id="top" style="width:100%; height:100%;">
TOP: Must be wide height
</textarea>
<textarea id="bottom" rows="5" style="width:100%;">
BOTTOM: size is ok. Position must be bottom
</textarea>
</div>
</div>
<div class="tab-pane" id="save">
</div>
</div>
</body>
</html>最佳答案
我对 bootstrap 了解不多。但我对 css 足够了解...
看看我写的代码:
body .tab-content{
height:calc(100% - 42px);
position:absolute;
top:42px;
left:0;
width:100%;
}
body .tab-pane{
height:100%;
}
textarea{
padding:0;
margin:0;
}<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li><a href="#tasks" data-toggle="tab">tasks</a></li>
<li><a href="#save" data-toggle="tab">save</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tasks">
<textarea id="top" style="width:100%; height:calc(100% - 104px);">
TOP: Must be wide height
</textarea>
<textarea id="bottom" rows="5" style="width:100%;height:100px">
BOTTOM: size is ok. Position must be bottom
</textarea>
</div>
<div class="tab-pane" id="save">
</div>
</div>
</body>
</html>问任何问题...
关于jquery - 我需要 textarea 来占用剩余的空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34700386/