css 正确申请 bootstrap 框

Question

我创建了一个 html 东西，它有一个名为 row-one 的父 div。 row-one class 将 height 设置为 40%。 html 正确呈现并且父项 height 应用于子项 div (child-fluid).

问题是我有两个盒子，第一个盒子按预期正确显示，但第二个盒子没有像第一个那样渲染

谁能告诉我一些解决方案

我的代码如下

Plunker

Html

  <div class="row-one">
    <div class="child-fluid">
      <div class="box">
        <div class="box-header well">
          <h2><i class="icon-bullhorn"></i> Box First</h2>
        </div>
        <div class="portlet-content box-content alerts">
          <div class="alert alert-error">
            <strong>Oh snap!</strong> Change a few things up and try submitting again.
          </div>
          <div class="alert alert-success">
            <strong>Well done!</strong> You successfully read this important alert message.
          </div>
          <div class="alert alert-info">
            <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
          </div>
          <div class="alert alert-block ">
            <h4 class="alert-heading">Warning!</h4>
            <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="portlet-layout">
    <div class="row-one portlet-column portlet-column-only span12 yui3-dd-drop" id="column-1">
      <div class="child-fluid portlet-dropzone portlet-column-content portlet-column-content-only" id="layout-column_column-1">
        <div class="portlet-boundary portlet-boundary_Qportlet_ quote-portlet  portlet-draggable yui3-dd-drop" id="p_p_id_Qportlet_"> <span id="p_Qportlet"></span>
          <section class="box portlet">
            <div class="box-header well portlet-topper">
              <h2 class="portlet-title"> <i class="icon-th"></i> Box Second </h2>
            </div>
            <div class="box-content portlet-content">
              <div class=" portlet-content-container" style="">
                <div class="portlet-body">
                  <!-- Portlet content goes here -->
                    <div class="alert alert-error">
                      <strong>Oh snap!</strong> Change a few things up and try submitting again.
                    </div>
                    <div class="alert alert-success">
                      <strong>Well done!</strong> You successfully read this important alert message.
                    </div>
                    <div class="alert alert-info">
                      <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                    </div>
                    <div class="alert alert-block ">
                      <h4 class="alert-heading">Warning!</h4>
                      <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
                    </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>

css

 html,
    body {
      height: 100%;
      overflow: auto;
    }

    body {}

    .sidebar-nav {
      padding: 9px 0;
    }

    .row-one {
      height: 40%;
    }

    .row-one .child-fluid,
    .box {
      height: 100%;
    }

    .row-one .box {
      overflow: hidden;
    }

    .row-one .box-content {
      height: calc(100% - 57px);
      overflow-y: auto;
    }

Answer 1

你可以试试这个：

 style type="text/css">
    html,
    body {
      height: 100%;
      overflow: auto;
    }

    body {}

    .sidebar-nav {
      padding: 9px 0;
    }

    .row-one {
      height: 40%;
    }

    .row-one .child-fluid,
    .box {
      height: 100%;
    }

    .row-one .box {
      overflow: hidden;
    }

    .row-one .box-content {
      height: calc(100% - 57px);
      overflow-y: auto;

    }


   .portlet-layout,.portlet-boundary
     {
      height: 100%;
    }

  </style>

Answer 2

你必须把 height 给 .portlet-layout 和 .portlet-boundary。具有 height: percentage value 的元素继承自其父元素，因此父元素必须具有 height value。但是，您使用以下规则：

Plunker

.portlet-layout,
.portlet-boundary
{
   height: 100%;
}

css 正确申请 bootstrap 框

css for applying correctly for a bootstrap box

html

css

styles

stylesheet

box