如果父级和子级具有相同的高度，为什么有垂直滚动条？ [英] Why is there a vertical scroll bar if parent and child have the same height?

问题描述

我希望我的 .sideBar 和 .contentHolder 元素在 .displayContainer 。

问题是 .displayContainer 会渲染不必要的垂直滚动条。水平滚动条是好的，但没有必要使用垂直滚动条。

我检查过，发现 .displayContainer 并且子元素具有相同的计算高度。那么为什么会有一个垂直滚动条？

任何人都可以告诉我如何删除它？

  body，html {margin：0px; padding：0px; border：0px;高度：100％; width：100％;}。displayContainer {height：100％;宽度：100％; overflow：auto; white-space：nowrap;}。sideBar {background-color：green; display：inline-block; width：20％; height：100％;}。contentHolder {background-color：red; display：inline-block;宽度：100％; height：100％;}  

 < div class = displayContainer> < div class =sideBar>< / div> < div class =contentHolder>< / div>< / div>  

由于所有内联级元素默认为 vertical-align：baseline ，元素如按钮， input ， textarea ， img 在您的代码中， inline-block div将从容器底部边缘略微提升。

a href =https://i.stack.imgur.com/jQaJx.png =nofollow noreferrer>

^{资料来源： Wikipedia.org}

此下拉式空间会在容器内增加高度，这会导致溢出并触发垂直滚动。

您可以通过滚动到 演示 。

这里有几种处理方式：

1. 覆盖 vertical-align：baseline 与 vertical-align：bottom （或另一个值）。 p>




2. 从显示：inline-block 切换到 display：block 。




3. 在父项上设置 line-height：0




4. 在父级上设置 font-size：0 。 （如有必要，您可以恢复儿童的字体大小。）

I want my .sideBar and .contentHolder elements inside of .displayContainer.

The problem is .displayContainer is rendering an unnecessary vertical scroll bar. Horizontal scroll bar is okay, but there is no need for a vertical scroll bar.

I have inspected and found that the .displayContainer and the child elements have the same computed height. So then why is there a vertical scroll bar?

Can anyone give me an idea how to remove it?

body, html {
  margin: 0px;
  padding: 0px;
  border: 0px;
  height: 100%;
  width: 100%;
}
.displayContainer {
  height: 100%;
  width: 100%;
  overflow: auto;
  white-space: nowrap;
}
.sideBar {
  background-color: green;
  display: inline-block;
  width: 20%;
  height: 100%;
}
.contentHolder {
  background-color: red;
  display: inline-block;
  width: 100%;
  height: 100%;
}

<div class="displayContainer">
  <div class="sideBar"></div>
  <div class="contentHolder"></div>
</div>

jsFiddle

解决方案

Short Answer

You've run into one of the sneakiest default settings in CSS: vertical-align: baseline

Switch the value to top, bottom or middle, and you should be all set.

---

Long Answer

The initial value of the vertical-align property, which applies to inline-level elements, is baseline. This allows browsers to provide space below elements for so-called descenders.

In typography, lowercase letters such as j, g, p and y are known as descenders because they breach the baseline.

baseline

The baseline is the line upon which most letters sit and below which descenders extend.

^{Source: Wikipedia.org}

Being that all inline-level elements are, by default, vertical-align: baseline, elements such as button, input, textarea, img and, like in your code, inline-block divs, will be elevated slightly from the bottom edge of their container.

^{Source: Wikipedia.org}

This descender space adds height inside the container, which causes an overflow and triggers the vertical scroll.

You can see the descender space by scrolling to the bottom of your demo. You'll notice the small gap between the child elements and the bottom edge.

Here are several ways to handle this:

1. Override vertical-align: baseline with vertical-align: bottom (or another value).

2. Switch from display: inline-block to display: block.

3. Set a line-height: 0 on the parent.

4. Set a font-size: 0 on the parent. (If necessary, you can restore the font-size on the children.)

这篇关于如果父级和子级具有相同的高度，为什么有垂直滚动条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！