search

NoLiD / Disquo

Data comparator for humans.
1 stars 1 forks source link

Panel-body overshoots the bottom of the application container. #5

Closed kdbanman closed 10 years ago

kdbanman commented 10 years ago

The bug is more apparent with the stylesheet modofications in the branch scroll-bug.

Each panel has a child panel-heading with a panel-body sibling element:

<div class='panel'>
  <div class='panel-heading'>Head</div>
  <div class='panel-body'>Body</div>
</div>

To fill the screen with the content of the .panel-body, both the .panel and the .panel-body are set to 100% height, and the .panel-body is set to scroll in case of overflow:

.panel {
  height: 100%;
}
.panel .panel-body {
  height: 100%;
  overflow-y: auto;
}

The problem is that the .panel-body ends up matching the height of the .panel, without shrinking to accommodate the .panel-heading. This makes an overflow on the div that wraps the entire .panel. (The overflow is the same height as the .panel-heading.)

One "solution" is to make both panel-heading height and panel-body height percentage, like 6% and 94%, respectively. This is ugly and reacts strangely to window resize.

kdbanman commented 10 years ago

This effect is also visible at this fiddle.

kdbanman commented 10 years ago

Fixed with CSS calc(). Ref: bb1a1c8b1698a1dc1b9d2fe27c0c37a2eac106f1