CSS盒子陰影導致滾動條

我有以下設置一個網站：CSS盒子陰影導致滾動條

<div id="container"> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="clearfooter"></div> 
</div> 
<div id="footer"></div>

我使用clearfooter和容器外的頁腳保持頁腳在當ISN頁面的底部沒有足夠的內容。

我的問題是，我想通過以下方式對div容器應用盒子陰影：

#container {width:960px; min-height:100%; margin:0px auto -32px auto; 
      position:relative; padding:0px; background-color:#e6e6e6; 
      -moz-box-shadow: -3px 0px 5px rgba(0,0,0,.8), 
      3px 0px 5px rgba(0,0,0,.8);} 
#header {height:106px; position:relative;} 
#content {margin:0px; padding:10px 30px 10px 30px; position:relative;} 
#clearFooter {height:32px; clear:both; display:block; padding:0px; margin:0px;} 
#footer {height:32px; padding:0px; position:relative; width:960px; 
      margin:0px auto 0px auto;}

正如你可以看到其上的div容器的每一側的陰影。但是，在這種情況下，當內容不佔據整個高度時，由於模糊造成陰影推過頁腳底部，仍然會出現滾動條。

是否有防止黑影從去越過容器div的邊緣，導致滾動條的一些方法？

感謝您的幫助！

來源

2010-03-01 Jason Turner

的Webkit最近改變其行爲在此間指出， http://archivist.incutio.com/viewlist/css-discuss/109662

事實上，正如今天它仍然是壁虎的問題，也許其他的瀏覽器。

我設法解決這個討厭的問題在壁虎使用負邊界，也適用於所有其他瀏覽器。

假設您有一個屏幕寬度的元素（E），應用了零偏移和模糊半徑R的框陰影。讓我們假設您正在處理水平滾動條問題，因爲陰影會導致元素E以擴展寬度重新佈局。

渦卷ë用輔助包裝元素（W）
集溢出：隱藏W上
集填充，R 0 R 0 W上
集餘量：-R 0 -R 0 W上

這個想法是使用溢出隱藏來刪除左側和右側有問題的陰影。然後使用填充+負邊距技巧不剪切頂部和底部陰影並將該框保留在HTML流中的同一位置上。

您可以調整此技巧以剪出有問題的陰影框的任意一側。

來源

2010-07-10 20:48:34

謝謝！爲了澄清你的帖子給他人'R'是你模糊的半徑（我有一個緩慢的一天，它花了我一秒）。 – mikemaccana 2011-02-01 18:43:43

@達爾文，你能提供一個這樣的例子。最近我一直沒有處理這個問題。如果你能提供一個快速演示它的工作，我會改變我選擇的答案。謝謝，這聽起來很有希望。 – 2011-08-31 00:04:10

純粹的迷人！ :) – 2011-11-02 19:55:57

恕我直言，並根據我的測試看來，一個元素的CSS影子同時增加頁面的總寬度和高度（如果周圍的元素的寬度或高度設置爲100％），就像你說的，我還沒有發現了一個解決這個問題的css解決方案。

所以我問你個問題，你是如何保持你的頁腳在頁面的底部？頁腳的寬度是多少？

我試過絕對定位（因爲我習慣於在頁面底部需要頁腳），但問題與寬度相同，當然可以將寬度設置爲像90％的比例，但問題仍然存在... 下面是說明這個簡單的概念所以這不是一個真正的答案的一個片段，我還沒有發現一個解決方案尚未

pastebin

希望這是非常有用的

來源

2010-03-02 13:57:18 ghedamat

我已經擴展了CSS來向你展示我是如何完成這個的。這樣做模仿了佈局與基於表格佈局的行爲方式。 – 2010-03-02 21:50:46

論父元素，加入overflow: visible可能會解決此問題。

雖然在底部的頁腳一般建議，您可能要改爲忘記設置上#container的min-height，而是設置頁腳position: absolute和bottom: 0，給#container一個margin-bottom因此它不會永遠得到背後的隱憂頁腳。如果您打算讓窗口底部的頁腳改爲使用position: fixed。

希望它有幫助。

來源

2010-03-04 02:32:56

做絕對位置會使頁腳看起來像瀏覽器窗口的底部而不是網站頁面的底部，這在大多數情況下並不是用戶所期望的或習慣的。 – 2010-03-04 02:59:04

雖然'溢出'有幫助嗎？ – 2010-03-04 05:05:48

不，它沒有。根據w3schools ref頁面，可見是默認值。（還是）感謝你的建議。 – 2010-03-04 19:27:18

那麼這個問題的解決方案是非常模糊的，或者沒有現有技術的解決方案。它真的太糟糕了，沒有辦法完成這個，因爲它是網頁設計中的一個常見主題。

我使出用一個PNG影子，因爲它似乎是唯一明智的解決方案。

來源

2010-05-13 02:05:49

當時，正在尋找解決方案，這也是：/ – raidfive 2010-09-24 05:43:14