CODEWITHSUNDEEP
htmlcsssizeoverflow
kdbanman
kdbanman

Reputation: 10557

CSS percentage height has no effect

I have some heading and content HTML wrapped in a container like this:

<div class='panel'>
    <div class='panel-heading'>
        Heading
    </div>
    <div class='panel-body'>
        Content
    </div>
</div>

I explicitly set the height of the parent element, .panel, and the child element,.panel-body:

.panel {
    height: 100%;
    width: 50%;
}
.panel-body {
    height: 10%;
    overflow-y: scroll;
}

But the child .panel-body height seems to ignore the CSS height rule, because it just grows arbitrarily with its content! You can see the behavior at this fiddle. Why does this happen?

It's important for me to have percent-calculated height and scrollable overflow on the .panel-body. Is this possible?

(For reference, this is the behavior I'm looking for, but with height calculated by em instead of %.)

Upvotes: 3

Views: 3288

Answers (2)

Fanckush
Fanckush

Reputation: 143

the parent tag should have a known height, in your case <panel> does have a known height but for some reason it's parent doesnt have a specific height, add this in your css:

html, body { 
   height: 100%; 
   width: 100%;
 }

not sure if it is the best but i think it works

Upvotes: 1

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7246

You could do this:

    • Add a container
    • Give it height 100%
    • Add min-height to the panel container

HTML

<div class="container">
<div class='panel'>
    <div class='panel-heading'>
        Heading
    </div>
    <div class='panel-body'>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
    </div>
</div>
</div>

CSS

html,body{height:100%;}

.container {
    height:100%;
}

.panel{
    width:50%;
    height:100%;
    min-height:100%;   
}

.panel-body {
    height: 20%;
    overflow-y: scroll;
}

* {
    /* for box visibility */
    border: 1px dashed grey !important;
    background-color: #ccc;
    padding: 5px !important;
}


DEMO http://jsfiddle.net/RWPQD/11/

Ps. I set the height of .panel-body at 20%, but you can change it accordingly.

Upvotes: 4

Related Questions