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>

我在本教程中使用bootstrap版本发布：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。

您的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”或“％”。看看是否有帮助。

Bootstrap：无法使div可滚动

2 个答案: