css for applying correctly for a bootstrap box

问题:

I have created a html stuff which has a parent div named as row-one. row-one class is having height set to 40%. The html is rendering correctly and the parent height is applied to the child div (child-fluid).

The problem is that I have two boxes, The first box is coming correctly as expected but the second box is not rendering like that of first

Can anyone please tell me some solution for this

My code is as given below

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;
    }

回答1:

You have to give height to .portlet-layoutand .portlet-boundary. An elment with height: percentage value inherits from its parent so the parent element must have height value. However, you use the below rules:

Plunker

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

回答2:

you can try this one:

 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>