CSS正确地申请引导框

Question

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

您可以尝试以下一种方法：

 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

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

Plunker

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