悬停时，如何在底部关闭3PX差距

Question

我在一个问题上挣扎着我的按钮不会伸展父级的全高。当我将按钮悬停时，它的底部从按钮的底部到父母divs底部。

ive将我的整个代码分解为这里的那个小代码，问题仍然存在。如果我在#main_buttons上使用float: left;，则#header_big和.buttons问题已经消失。但是，如果我在#main_buttons上使用float，则#header_big我的整个站点崩溃了，因此如果我也必须重新编码网站的其余部分，这不是一个解决方案。还有其他解决方案吗？https://jsfiddle.net/ewktoqrl/

#header_big {
  background-color: #cccccc;
  min-width: 100%;
  min-height: 100%;
  float: left;
}
#main_buttons {
  min-height: 100%;
  float: left;
}
.buttons {
  max-height: 100%;
  float: left;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 12px;
  padding-top: 14px;
}
.buttons:hover {
  background-color: #efefef;
}

<div id="header_big">
  <div id="main_buttons">
    <div id="home" class="buttons">
      Home
    </div>
    <div id="cv" class="buttons">
      CV
    </div>
    <div id="nyheter" class="buttons">
      Nyheter
    </div>
    <div id="movie" class="buttons">
      Film
    </div>
    <div id="games" class="buttons">
      Spill
    </div>
    <div id="music" class="buttons">
      Musikk
    </div>   
  </div>
</div>

Answer 1

我只会在您的.buttons上添加margin-bottom: -3px;。我认为这将解决您的问题。但是，我不确定问题的来源。我认为这可能来自.buttons中的填充。