Bootstrap：無法使div可滾動

Question

我有以下代碼，我在其中輸入文本供用戶輸入信息，並在文本輸入上方顯示了用戶輸入的內容。 我希望將文本字段上方的面板設置為一定的高度，並且當它溢出時，它應該是可滾動的。

<div class="row-fluid" style="max-height:10;overflow-y: scroll;">
  <div class="panel-body" style="max-height:10;overflow-y: scroll;">
    {% for message in messages %} {% module Template("message.html", message=message) %} {% end %}
  </div>
</div>

<div class="row-fluid">
    <form action="/a/message/new" method="post" id="messageform" class="span12">
      <table>
          <tr>
              <td>
                  <input name="body" id="message" style="width:500px">
              </td>
              <td style="padding-left:5px">
                  <input type="submit" value="{{ _(" Post ") }}">
                  <input type="hidden" name="next" value="{{ request.path }}">{% module xsrf_form_html() %}</td>
          </tr>
      </table>
    </form>
</div>

另外，我希望上面的部分得到修復，而不是擴展到波紋管部分。

<div class="row-fluid">
  <div class="span4">
    testet seetsetsetset
  </div>
  <div class="span4">
    testsetstse estsetset
  </div>
  <div class="span4">
    setsetetsets setsetset
  </div>
</div>

我正在使用在本教程中發布的引導程序版本： http : //taskmessenger.com/blog/index.php/coderdojo-twitter-bootstrap-lesson-2-create-the-layout-page/

此外，還使用了以下css來格式化用戶輸入和答復的結果，如果無法以自舉方式進行操作，那么也可以在其上給出很少的指針，那就太好了：

body {
  background: white;
  margin: 10px;
}

body,
input {
  font-family: sans-serif;
  font-size: 10pt;
  color: black;
}

table {
  border-collapse: collapse;
  border: 0;
}

td {
  border: 0;
  padding: 0;
}

#body {
  position: absolute;
  bottom: 10px;
  center: 10px;
}

#input {
  margin-top: 0.5em;
}

#inbox .message {
  padding-top: 0.25em;
}

#nav {
  float: right;
  z-index: 99;
}

Answer 1

您設置的height值必須是可測量的值（即px ， em ， %等）。 此外，您只需要為其中一個容器聲明它。 您還可以通過將overflow-y設置為auto而不是scroll來隱藏不需要的scroll 。

您也有無效的CSS。 CSS中沒有center屬性。 我在示例中已將其注釋掉。

我唯一的改變就是改變

<div class="row-fluid" style="max-height:10;overflow-y: scroll;">
  <div class="panel-body" style="max-height:10;overflow-y: scroll;">

至

<div class="row-fluid" style="max-height:50px;overflow-y: auto;">
    <div class="panel-body">

這是完整的代碼：

 body { background: white; margin: 10px; } body, input { font-family: sans-serif; font-size: 10pt; color: black; } table { border-collapse: collapse; border: 0; } td { border: 0; padding: 0; } #body { position: absolute; bottom: 10px; /* center: 10px; // This is invalid */ } #input { margin-top: 0.5em; } #inbox .message { padding-top: 0.25em; } #nav { float: right; z-index: 99; } 

 <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/> <link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/> <script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> <div class="row-fluid" style="max-height:50px;overflow-y: auto;"> <div class="panel-body"> {% for message in messages %} {% module Template("message.html", message=message) %} {% end %} </div> </div> <div class="row-fluid"> <form action="/a/message/new" method="post" id="messageform" class="span12"> <table> <tr> <td> <input name="body" id="message" style="width:500px"> </td> <td style="padding-left:5px"> <input type="submit" value="{{ _(" Post ") }}" /> <input type="hidden" name="next" value="{{ request.path }}" />{% module xsrf_form_html() %} </td> </tr> </table> </form> </div> <div class="row-fluid"> <div class="span4"> testet seetsetsetset </div> <div class="span4"> testsetstse estsetset </div> <div class="span4"> setsetetsets setsetset </div> </div> 

注意 ：這是一個Bootply，可以更好地演示其外觀： http : //www.bootply.com/1LGjrUomIl

Answer 2

max-height:10;

無效的值，結尾應為“ px”，“ em”，“ cm”或“％”。 看看是否有幫助。