CODEWITHSUNDEEP
htmlcss
shell
shell

Reputation: 1937

Scrollbar scrolls past content (no height specified, only padding-bottom)

I am matching the height of one div according to the height of another. The first div has an aspect ratio and thus gets its height from padding-bottom only. I matched the second one using the same css but noticed scrollbars scroll past the content or appear when not needed.

css:

.one {
  display: inline-block;
  height: 0px;
  width: 200px;
  padding-bottom: calc(.5625 * 200px); /* aspect ratio 56.25% of width */
  background-color: white;
}

.two {
  margin-left: 15px;
  display: inline-block;
  height: 0px;
  width: 200px;
  padding-bottom: calc(.5625 * 200px); /* aspect ratio 56.25% of width */
  background-color: white;
  overflow-y: auto; /* scroll on overflow if needed */
}

Here is a fiddle:

https://jsfiddle.net/m88stpf4/3/

Upvotes: 1

Views: 799

Answers (3)

Josh Crozier
Josh Crozier

Reputation: 240878

The vertical scrollbar appears because the height of the child element is added to the calculated padding of the parent element.

The simplest solution would be to set the height of the child element to inherit so that it will inherit the parent element's height of 0:

Updated Example

.one .one-contents,
.two .two-contents {
  height: inherit;
}

Of course you could also set the height to 0, but the inherit value may be more flexible.

If the element contains multiple children elements, then you could always combine the direct child selector, >, in conjunction with the universal selector, *, in order to target any direct child element (rather than all nested descendant elements).

.one > *,
.two > * {
  height: inherit;
}

If you want another solution, an alternative would be to change the parent element's display value to flex, or in this case, inline-flex:

Updated Example

.one, .two {
  display: inline-flex;
}

Upvotes: 1

Julesezaar
Julesezaar

Reputation: 3396

https://jsfiddle.net/m88stpf4/4/

the scrollbar is added because the height is set to 0 in your example I guess. Check the fiddle. I added following lines to your code.

.two {
  position: relative;
}
.two-contents{
  position: absolute;
  top: 0;
  left: 0;
}

Thats the way to go when using this padding-top (or bottom)... Make that container relative and then add an absolute container into the one with the padding

Upvotes: 0

tao
tao

Reputation: 90038

I believe your markup is overly complex: You should only use a combination of min-height and max-height for your desired result:

.content-box {
  vertical-align: top;
  display: inline-block;
  min-height: calc(.5625 * 200px);
  max-height: calc(.5625 * 200px);
  width: 200px;
  background-color: white;
  overflow-y: auto;
  margin: 0 15px 15px 0;
  
  /* rest are totally optional*/
  padding: 10px;
  box-sizing: border-box;
}
body {
  background-color: #eee;
  padding: 15px;
}
<div class="content-box">
  contents for div one
</div>

<div class="content-box">
  contents for div two
  scrollbar not needed here but it appears anyway
  this should probably have a lot more text. a lot more text a lot more text
  this should probably have a lot more text. a lot more text a lot more text
  this should probably have a lot more text. a lot more text a lot more text
</div>

<div class="content-box">
  contents for moar divs
  scrollbar not needed here but it appears anyway
</div>

Upvotes: 1

Related Questions