css，用于正确应用引导程序框

Question

我创建了一个html内容，它有一个名为row-one的父div。row-one类的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

您必须将height赋予.portlet-layout和.portlet-boundary。具有height: percentage value的elment从其父元素继承，因此父元素必须具有height value。但是，您使用以下规则：

Plunker

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

Answer 2

你可以试试这个：

 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>