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

來源

2014-09-03 Bartosz Bialecki

由於標題有固定的高度，是否有一個原因，你爲什麼不使用'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:06:13

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

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

看到這裏 - http://jsfiddle.net/2g789bgv/1/

來源

2014-09-03 08:42:06 Alex

我認爲這不是我的意思，主要內容應該始終是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:48:50 LinkinTED

我試過了，它似乎沒有工作。 – 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中的底部填充

回答

相關問題