下記例は、見出し（h1）の行と、ラベルとテキストエリアの行と、ボタンの行を足して100%の高さになるようにしています。
それらのすぐ親の要素でd-flex flex-columnを指定ているので、前述の3行は縦に並ぶflex-itemとして扱われます。また、ラベルとテキストエリアの行ではrow flex-grow-1を指定しているので、3行合計が100%の高さになるように、ラベルとテキストエリアの行の高さが広がります。
また、各所にh-100を指定してブラウザの高さ全体を使っていますが、d-flex flex-columnの子要素は自動的に高さが決まるのでh-100は指定しません。
<!DOCTYPE html>
<html class="h-100">
<head>
<meta charset="utf-8" />
<title>見出しとコンテンツを足して高さ100%</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body class="h-100">
<div class="container h-100 d-flex flex-column">
<h1 class="bg-info">見出し</h1>
<div class="form-group row flex-grow-1" style="height: 0;">
<label class="col-3">私はボタンですか？</label>
<div class="col-9 h-100">
<textarea class="form-control h-100">いいえ、あなたはラベルです。</textarea>
</div>
</div>
<div class="form-group row">
<div class="col-9 offset-3">
<button class="btn btn-primary">私がボタンです。</button>
</div>
</div>
</div>
</body>
</html>
このように表示されます。
なお、.flex-grow-1のタグにstyle="height: 0;"を指定しているのは、この指定がないとWebkitでは高さが画面の下端まで届かないためです。FirefoxもEdgeもIEすらも、style="height: 0;"の指定がなくても正常に表示されるのに、Chromeだけおかしい……。