CSS：calc（）不尊重Firefox和IE中的底部填充

问题描述：

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

主要内容应该有一个固定的高度和内容应滚动。

这里是我的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

由于标题有固定的高度，是否有一个原因，你为什么不使用'top：50px;底部：0像素;'？ – 2014-09-03 08:45:21

如果我这样做，底部填充也不受尊重。 – 2014-09-03 08:49:38

为什么不能将填充添加到'long-content' div呢？ – Morpheus 2014-09-03 08:57:17

答

你的问题是，Chrome的解释规格则FF & 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一个我没有想到这种情况。

非常感谢你的工作。 – 2014-09-03 10:24:05

答

如果你把计算（）引号它的工作原理 - height: calc('100% - 50px');

看到这里 - http://jsfiddle.net/2g789bgv/1/

我认为这不是我的意思，主要内容应该始终是300像素的高度，当您添加引号时，它会扩展到儿童的身高。 – 2014-09-03 08:45:34

这是不是做到了？我害怕我对你真正想要的东西感到困惑。 – Alex 2014-09-03 08:47:53

我想主要有固定的高度和它内部的内容在坏死时滚动。 – 2014-09-03 08:53:17

答

的填充被添加到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

我试过了，它似乎没有工作。 – 2014-09-03 08:52:20

@BartoszBialecki，然后请澄清想要的结果是什么，因为我做了这个[示例]（http://jsfiddle.net/2g789bgv/5/）并添加了一个jQuery函数，它将'.content'的高度写入头。它说250px。 '.content'父项的高度为300px，你希望'.content'为高度减去50px，即250px。这似乎是我想要什么... – LinkinTED 2014-09-03 09:07:31

我想内容可滚动和主要内容有一个固定的高度和内容应该有一个填充周围，但底部填充不工作，Firefox和IE忽略底部填充。 – 2014-09-03 09:10:23

CSS：calc（）不尊重Firefox和IE中的底部填充

相关推荐