入力とテキストエリアの高さを同じに保つにはどうすればよいですか？

Question

メッセージの先頭（textarea）をインラインで入力し、インラインで入力し、下部をインラインで入力します。

メッセージのテキストエリアには、左側の3つの入力と同じ高さが必要です。私は実際に境界線がうまく整列したいと思っています

私は手動で高さを指定しようとしましたが、ウィンドウのサイズが変わると直ちに高さが変わり、デザインが捨てられました。

これをどのようにして対応させるにはどうすればよいですか？

は写真のような結果を表示するには、ここでは、外部リンクである（ mdをブートストラップすることにより）表示可能領域を拡張する必要があります。 https://jsfiddle.net/6ma7ndmL/3/

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700'); 
 
section { 
 
    width: 100%; 
 
    padding: 4em 0; 
 
} 
 
@media screen and (min-width: 768px) { 
 
    section .container, 
 
    section .row { 
 
    padding: 0; 
 
    } 
 
} 
 
header.section-header { 
 
    text-align: center; 
 
    padding: 0 0 3em; 
 
} 
 
header.section-header h2 { 
 
    font-size: 2em; 
 
} 
 
section.contact form { 
 
    font-family: 'Roboto Mono'; 
 
    color: #000; 
 
} 
 
section.contact form input, 
 
section.contact form textarea { 
 
    border-color: #000; 
 
    border-width: 2px; 
 
    border-radius: 0; 
 
    transition: 0.4s border-color ease; 
 
} 
 
section.contact form input:focus, 
 
section.contact form textarea:focus { 
 
    transition: 0.4s border-color ease; 
 
    border-color: #f33; 
 
} 
 
section.contact form textarea { 
 
    resize: none; 
 
} 
 
section.contact form button.btn { 
 
    background-color: #000; 
 
    border-color: #000; 
 
    border-width: 2px; 
 
    color: #fff; 
 
    outline: none; 
 
    border-radius: 0; 
 
    float: right; 
 
    transition: 0.4s background-color ease, 0.4s color ease, 0.4s border-color ease; 
 
} 
 
section.contact form button.btn:hover { 
 
    transition: 0.4s background-color ease, 0.4s color ease, 0.4s border-color ease; 
 
    background-color: #fff; 
 
    color: #000; 
 
    border-color: #f33; 
 
} 
 
@media screen and (min-width: 768px) { 
 
    section.contact form [class^='col-']:nth-child(1) { 
 
    padding-left: 0; 
 
    } 
 
    section.contact form [class^='col-']:nth-child(2) { 
 
    padding-right: 0; 
 
    } 
 
    section.contact form [class^='col-']:nth-child(3) { 
 
    padding: 0; 
 
    } 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="contact"> 
 
    <section class="contact"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <header class="section-header"> 
 
      <h2>contact</h2> 
 
     </header> 
 
     <div class="col-lg-10 offset-lg-1"> 
 
      <form action="" method="post"> 
 
      <div class="col-md-6"> 
 
       <div class="form-group"> 
 
       <input id="name" type="text" name="name" class="form-control" /> 
 
       <label for="name">name</label> 
 
       </div> 
 
       <div class="form-group"> 
 
       <input id="email" type="email" name="email" class="form-control" /> 
 
       <label for="email">email</label> 
 
       </div> 
 
       <div class="form-group"> 
 
       <input id="phone" type="tel" name="phone" class="form-control" /> 
 
       <label for="phone">phone</label> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-6"> 
 
       <div class="form-group"> 
 
       <textarea id="message" name="message" class="form-control"></textarea> 
 
       <label for="message">message</label> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-12"> 
 
       <div class="form-group"> 
 
       <button id="formsubmit" type="submit" class="btn">send</button> 
 
       </div> 
 
      </div> 
 
      </form> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</div>

Answer 1

このコードが動作しているようです。 Fiddle Demo編集：このコードを正しく理解していただければ幸いです。

section.contact form textarea { 
    line-height: 98.5px !important; 
} 

98.5px exactoムンド:) であること、またはあなたには、いくつかのJavaScriptを使用して、このようなものを使用することができます。

document.getElementById("message").rows = "10";