CSS：如何讓背景和邊框溢出？

在我的網頁我有頂部和底部被固定與CSS，position: fixed;CSS：如何讓背景和邊框溢出？

頂部和底部我有一個絕對定位頁面元素之間 - 一個div - 而這正是我的大部分內容的出現。當內容對於頁面元素來說太大時，我希望它在y軸上溢出。在這種情況下，我希望滾動條在屏幕（不是頁面元素）的右側出現，因此我在正文元素上有overflow-y: scroll;。（請參閱Facebook的例子）。

現在，除了頁面元素的邊框和背景之外，此工作正常。最初在視圖中的內容既有邊框和背景，但當我向下滾動到溢出區域時，它既沒有。

我已經嘗試使用絕對（bottom: 105px）和相對（height: 100%;）方法設置頁面的高度，但都不起作用。我也嘗試用<p style="clear: both"></p>結束頁面元素內的內容。

任何想法？謝謝！

來源

2013-01-10 Kim Prince

在沒有固定大小的子元素上設置邊框和背景。 –

問題很可能實際上是height: 100%;。當你填充背景顏色時，它會填滿100％的路徑（可見區域）。問題是，由於溢出去過去的100％，背景顏色不堅持。

而不是使用height:100%，把任何你想要你的絕對定位元素的min-height。這樣當background-color填滿它時，它填補了整個事情，因爲溢出總是會繼續高於最低高度。

編輯：我意識到一個大塊的單詞答案是討厭的。更簡潔：

您有：

.middle {height:100%;}

擺脫這一點，將其更改爲：

.middle {min-height:100%;}

來源

2013-01-10 21:03:20 Jason

感謝mOose89，但我真的希望頁面元素填充頂部和底部之間的空間，所以不要指定最小高度 –

您是否嘗試min-height：100％？這應該與高度相同：100％用於填充空間，但應該允許包含溢出 – Jason

我不太清楚你與你的邊界想要什麼。 This fiddle has borders at the top and bottom of the content only與此代碼：

HTML

<div class="top">Top</div> 
<div class="middle"> 
    <div class="content"></div> 
</div> 
<div class="bottom">Bottom</div>

CSS

.top, 
.bottom { 
    position: fixed; 
    height: 100px; 
    top: 0; 
    left: 0; 
    right: 0; 
    background-color: red; 
    z-index: 1; 
} 

.bottom { 
    bottom: 0; 
    top: auto; 
    background-color: blue; 
} 

.middle { 
    position: absolute; 
    top: 100px; 
    left: 0; 
    right: 0; 
    bottom: 100px; 
} 

.content { 
    width: 100%; 
    height: 1000px; 
    background-color: yellow; 
    border: 10px solid black; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    margin-bottom: 100px; 
}

This fiddle has borders constantly around it與此代碼（相同的HTML如上）：

CSS

.top, 
.bottom { 
    position: fixed; 
    height: 100px; 
    top: 0; 
    left: 0; 
    right: 0; 
    background-color: red; 
    border-bottom: 10px solid black; 
    z-index: 1; 
} 

.bottom { 
    bottom: 0; 
    top: auto; 
    background-color: blue; 
    border-top: 10px solid black; 
    border-bottom: 0; 
} 

.middle { 
    position: absolute; 
    top: 110px; 
    left: 0; 
    right: 0; 
    bottom: 110px; 
} 

.content { 
    width: 100%; 
    height: 1000px; 
    background-color: yellow; 
    border-right: 10px solid black; 
    border-left: 10px solid black; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    margin-bottom: 110px; 
}

來源

2013-01-11 01:01:11 ScottS

CSS：如何讓背景和邊框溢出？

回答

相關問題