CODEWITHSUNDEEP
htmlcssstylesheight
Alex Man
Alex Man

Reputation: 4886

parent div height is not applying for child div

I have created a html stuff which has a parent div named as parent-portlet. parent-portlet class is having height set to 40%. The html is renedering correctly but the issue is that the child div (child-fluid) height is not getting applied to that of the parent div (parent-portlet).

Can anyone please tell me some solution for this

My code is as given below

Plunker

Html

  <div class="parent-portlet">
    <div class="child-fluid">
      <div class="box">
        <div class="box-header well">
          <h2><i class="icon-bullhorn"></i> Alerts</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>

css

.parent-portlet { 
  height: 40%;
}

.portlet-content {
  overflow-y: auto;
}

.child-fluid {
  height: inherit;
}

Upvotes: 1

Views: 424

Answers (1)

Alex
Alex

Reputation: 8695

.parent-portlet inherits 40% of its parent which does not have height. So you can give height:100% to html and body and then set overflow-y: auto; on .parent-portlet

Plunker

An element has height:auto; by default if you don't specify height for it, it won't inherit height from its parent. In addition, according to w3c:

Height : Percentage Value

The percentage was always calculated with respect to the content box of the parent element.

Edited after comment:

You have give height: 100%; and overflow-y: auto; to .child-fluid

Plunker

OP desire situation:

I need to have a fixed .box-header on top of .box and scrolling .box-content.

Plunker

Upvotes: 1

Related Questions