parent div height is not applying for child div

Question

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

This may help you: http://stackoverflow.com/a/31728799/3597276 — Michael Benjamin, Dec 12 '15 at 05:59
Sorry Alex, on my mobile and plunkr not accessible. Will try again when back at my desktop. But bottom line, when using percentage heights, you need to specify a height for all parent elements, up to and including the root element. Make sure you have `html, body { height: 100%; }` — Michael Benjamin, Dec 12 '15 at 06:12

Alex · Accepted Answer · 2015-12-12T07:11:08.783

1

.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

edited Dec 12 '15 at 07:11

answered Dec 12 '15 at 06:09

Alex

8,461
6
37
49

Thanks for your answer but the issue is that, say if .parent-portlet is having 40% height then same height should apply to .child-fluid giving scrollbar for the portlet-content – Alex Man Dec 12 '15 at 06:13
actually I want the scrollbar to come for `.child-fluid` `portlet-content`, right now it is coming for `.parent-portlet` – Alex Man Dec 12 '15 at 06:33
@AlexMan Does it fix your problem? – Alex Dec 12 '15 at 06:39
can you come for a [chat](http://chat.stackoverflow.com/rooms/97701/chat-with-alireza) – Alex Man Dec 12 '15 at 06:42
I have a similar issue again, I have posted a new SO question [css for applying correctly for a bootstrap box](http://stackoverflow.com/questions/34238478/css-for-applying-correctly-for-a-bootstrap-box), Can you please take a look – Alex Man Dec 12 '15 at 09:52

parent div height is not applying for child div

1 Answers1