用于正确应用引导框的 css答案

【问题标题】：css for applying correctly for a bootstrap box用于正确应用引导框的 css
【发布时间】：2015-12-12 09:51:37
【问题描述】：

我创建了一个 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;
    }

【问题讨论】：

标签： html css styles stylesheet box

【解决方案1】：

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

Plunker

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

【讨论】：

我们能否同时提及.row-one，因为我的应用程序中有很多.portlet-layout, .portlet-boundary 类

【解决方案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>

【讨论】：