html - 具有两列和文本区域的 Bootstrap 行填满页面

Question

我正在尝试制作一个简单的页面，该页面在一行上有一个标题，然后在一行上有两列。每列将包含一个文本区域。我希望列和文本区域填满页面的其余部分。我一直在寻找，但我无法解决这个问题。我正在使用 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，则可以使用视口(viewport)百分比单位，例如 width: 100vw 和 height: 100vh (这意味着 100% 的视口(viewport)/窗口大小)。

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