Question

如何使用引导程序4使textarea元素填充页眉和页脚之间的所有高度，而又没有滚动条？这是我的html代码：

#container {
    background-color: rgb(253, 248, 177);
}

#title {
    color: white;
    padding-top: 7px; 
}

#cancel, #submit {
    color: white;
    font-size: 20px;
}

#add {
    font-size: 20px; 
}

#delete, #cancel, #submit {
    display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container min-vh-100 d-flex flex-column" id="container">

  <!-- header -->
  <div class="row align-items-start bg-info" id="header">
    <div class="col text-center">
      <button type="button" class="btn" id="cancel">&#10007;</button>
    </div>
    <div class="col text-center">
      <h4 id="title">Notebook</h4>
    </div>
    <div class="col text-center">
      <button type="button" class="btn" id="submit">&#10004;</button>
    </div>
  </div>

  <br />
  <!-- main -->
  <div class="row flex-grow-1">
    <div class="col" id="main">
      <textarea class="form-control textarea" placeholder="write note" id="note"></textarea>
    </div>
  </div>

  <!-- footer -->
  <div class="row align-items-end" id="footer">
    <div class="col d-flex justify-content-start" style="padding: 10px; padding-left: 25px;">
      <button id="add" class="btn btn-info rounded-circle">
        <h4 style="padding: 0px; margin: 0px;">&#x2b;</h4>
      </button>
      <button id="delete" class="btn btn-info rounded-circle">&#128465;</button>
    </div>
  </div>

</div>

谁能告诉我该怎么做，我希望它具有响应性，所以我不想为textarea元素设置特定的行数。

Answer 1

只需将h-100添加到文本区域，因为其父div已经flex-grow-1，因此它已经填满了所有剩余空间：

#container {
    background-color: rgb(253, 248, 177);
}

#title {
    color: white;
    padding-top: 7px; 
}

#cancel, #submit {
    color: white;
    font-size: 20px;
}

#add {
    font-size: 20px; 
}

#delete, #cancel, #submit {
    display: none;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container min-vh-100 d-flex flex-column" id="container">

      <!-- header -->
      <div class="row align-items-start bg-info" id="header">
        <div class="col text-center">
            <button type="button" class="btn" id="cancel">&#10007;</button>
        </div>
        <div class="col text-center">
          <h4 id="title">Notebook</h4>
        </div>
        <div class="col text-center">
            <button type="button" class="btn" id="submit">&#10004;</button>
        </div>
      </div>

      <br />
      <!-- main -->
      <div class="row flex-grow-1">
        <div class="col" id="main">
            <textarea class="form-control textarea h-100"  placeholder="write note" id="note"></textarea>
        </div>
      </div>

      <!-- footer -->
      <div class="row align-items-end" id="footer">
        <div class="col d-flex justify-content-start" style="padding: 10px; padding-left: 25px;">
          <button id="add" class="btn btn-info rounded-circle"><h4 style="padding: 0px; margin: 0px;">&#x2b;</h4></button>
          <button id="delete" class="btn btn-info rounded-circle">&#128465;</button>
        </div>
      </div>

    </div>

Answer 2

作为替代答案，可以使用Text Area代替<div contenteditable="true" > </div>。对于占位符，我已经使用CSS实现了相同的目的。

#container {
    background-color: rgb(253, 248, 177);
}

#title {
    color: white;
    padding-top: 7px; 
}

#cancel, #submit {
    color: white;
    font-size: 20px;
}

#add {
    font-size: 20px; 
}

#delete, #cancel, #submit {
    display: none;
}

div[data-placeholder]:not(:focus):not([data-div-placeholder-content]):before {

    content: attr(data-placeholder);

    float: left;

    margin-left: 2px;

    color: #b3b3b3;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container min-vh-100 d-flex flex-column" id="container">

      <!-- header -->
      <div class="row align-items-start bg-info" id="header">
        <div class="col text-center">
            <button type="button" class="btn" id="cancel">&#10007;</button>
        </div>
        <div class="col text-center">
          <h4 id="title">Notebook</h4>
        </div>
        <div class="col text-center">
            <button type="button" class="btn" id="submit">&#10004;</button>
        </div>
      </div>

      <br />
      <!-- main -->
      <div class="row flex-grow-1">
        <div class="col" id="main">
            <div contenteditable="true"  class="form-control textarea"  data-placeholder="Write note!" id="note"></div>
        </div>
      </div>

      <!-- footer -->
      <div class="row align-items-end" id="footer">
        <div class="col d-flex justify-content-start" style="padding: 10px; padding-left: 25px;">
          <button id="add" class="btn btn-info rounded-circle"><h4 style="padding: 0px; margin: 0px;">&#x2b;</h4></button>
          <button id="delete" class="btn btn-info rounded-circle">&#128465;</button>
        </div>
      </div>

    </div>

如何使用bootstrap 4使textarea元素填充所有高度？

2 个答案: