Question

我正在尝试创建一个在一行上有标题的简单页面，然后是一个包含两列的行。每列将包括textarea。我希望列和textareas填满页面的其余部分。我一直在寻找，但我无法解决这个问题。我正在使用boostrap v4.0.0-beta.2。

这是我的代码：

  label { font-weight: bold; }
            html, body, .container-fluid {
                height: 100%;
                min-height: 100%;
            }
            textarea.form-control {
                height: 100%;
                width: 100%;
                min-height: 100%;
            }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" style="background: #DDDDDD">
   <div class="row">
       <div class="col-lg-12 jumbotron text-center">
           <h1>Formatter</h1>
           <p>Enter raw input to see output</p> 
       </div>
   </div>
   <div class="row" style="background: #CCCCCC;">
       <div class="col-lg-6">
           <label for="input">Input:</label>
           <textarea class="form-control" id="input">
           </textarea>
       </div>
       <div class="col-lg-6">
           <label for="output">Output:</label>
           <textarea readonly class="form-control" id="output"></textarea>
        </div>
    </div>
</div>

Answer 1

在您的代码中，您将文本区域的高度设置为100％。但它取决于它的父div。 100％表示其父母div的100％。

因此，您必须更改其所有父div样式，或者如果您对CSS3没用，则可以使用width: 100vw和height: 100vh等视口百分比单位（这意味着100％的视口/窗口）尺寸）。

textarea.form-control {
     height: 100vh;
     width: 100vw;
}

Answer 2

您可以通过使用jQuery .height（）函数设置窗口高度来完成此操作。您可以查看代码段，但记得添加jQuery文件。

＆＃13;

  $(document).ready(function(){
    var textareaHeight = $(window).height();
    $(".form-control").height(textareaHeight - 30);
  });

＆＃13;

label { font-weight: bold; }
            html, body, .container-fluid {
                height: 100%;
                min-height: 100%;
            }
            textarea.form-control {
                height: 100%;
                width: 100%;
                min-height: 100%;
            }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid" style="background: #DDDDDD">
   <div class="row">
       <div class="col-lg-12 jumbotron text-center">
           <h1>Formatter</h1>
           <p>Enter raw input to see output</p> 
       </div>
   </div>
   <div class="row" style="background: #CCCCCC;">
       <div class="col-lg-6">
           <label for="input">Input:</label>
           <textarea class="form-control" id="input">
           </textarea>
       </div>
       <div class="col-lg-6">
           <label for="output">Output:</label>
           <textarea readonly class="form-control" id="output"></textarea>
        </div>
    </div>
</div>

＆＃13;

Answer 3

您可以通过$this->session->userdata("Firstformdata");将height设置为textarea来实现此目的。您必须计算填充页面所需的高度

带有两列和textareas的Bootstrap行填满页面

3 个答案: