Question

我在Firefox 32和IE 11中使用calc（）时遇到问题，div的底部填充不受尊重，在Chrome和Opera中一切正常。

主要内容应具有固定的高度，内容应该可滚动。

这是我的HTML代码：

<body>
<div class="main-content">
  <div class="header">header</div>
  <div class="content">
    content
    <div class="long-content">
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      long content<br />
      <button type="button">Button</button>
    </div>
  </div>
</div>

和css：

.main-content {
  width: 100%;
  background-color: #595959;
  height: 300px;
}

.header {
  background-color: #000000;
  height: 50px;
}

.content {
  background-color: red;
  padding: 15px;
  height: calc(100% - 50px);
  overflow: auto;
  position: relative;
}

我该如何解决这个问题？

DEMO

Answer 1

你遇到的问题是Chrome以不同的方式解释规格然后FF＆amp; IE确实如此。正如您在此answer和错误报告Bug 748518 - padding-bottom is ignored with overflow:auto;中所看到的，尚不完全清楚谁是正确的。

如果您想避免使用内部容器，可以使用:after伪类和content属性在内容之后添加元素。

.content:after {
  content: "";
  display: block;
  height: 20px;
  width: 100%;
}

.content {
  background-color: red;
  padding-top: 20px;
  padding-left: 20px;
  height: calc(100% - 50px);
  overflow: auto;
  position: relative;
}

jsfiddle demo

您肯定需要通过浏览器兼容性检查是否符合您的要求。但是当你也使用calc时，这应该没问题。

至少会解决padding处的bottom，padding方面的right也可能有解决方案，但正如您刚才所说的那样bottom上的那个我没想到那个案例。

Answer 2

如果你把calc（）放在引号中就行了 - height: calc('100% - 50px');

请参阅此处 - http://jsfiddle.net/2g789bgv/1/

Answer 3

填充添加到div的高度。意味着.content的高度为100% - 50px + 15px + 15px。如果您希望填充在高度范围内，请使用box-sizing: border-box。

.content {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

可以找到更多信息here

CSS：calc（）不支持Firefox和IE中的底部填充

3 个答案: