我需要 textarea 来占用剩余的空间答案

【问题标题】：I need textarea to take the rest of space我需要 textarea 来占用剩余的空间
【发布时间】：2016-01-10 09:39:22
【问题描述】：

我是 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>

【问题讨论】：

标签： jquery html css twitter-bootstrap-3

【解决方案1】：

我对引导程序了解不多。但我对 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>

提出任何问题...

【讨论】：

【解决方案2】：

看看这个：

<!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>

    <style type="text/css">
        html, body { height: 100%; }
        .tab-content { height: calc(100% - 42px); }
        #tasks { position: relative; height: 100%; }
        #top { position: absolute; top: 0; right: 0; left: 0; width: 100%; height: calc(100% - 108px); }
        #bottom { position: absolute; bottom: 0; right: 0; left: 0; width: 100%; height: 108px; }
    </style>
</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">TOP: Must be wide height</textarea>
            <textarea id="bottom" rows="5">BOTTOM: size is ok. Position must be bottom</textarea>

        </div>

        <div class="tab-pane" id="save">tare</div>

    </div>

</body>
</html>

希望对你有帮助。

【讨论】：