Question

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

Answer 1

检查出来：

＆＃13;

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

＆＃13;

我希望它有所帮助。

Answer 2

我不太了解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>

要求任何问题......

我需要textarea来占用其余的空间

2 个答案: