CSS邊框不延伸整個Div

看看下面的圖片，你可以看到我在div的每一邊都有一個邊框，或者至少在div的右邊。我想邊界做的是擴展整個灰色的div，但是當我把height:100%;與邊界它看起來就像它的div。檢查我的CSS也下面，讓我解釋一下。 #Content是包含所有內容的大灰色div，如果我刪除最小高度並使其爲height:70%;邊框擴展整個頁面。看看下面的前後圖片來獲得一個想法。CSS邊框不延伸整個Div

CSS：

#Content { 
padding:0px; 
min-height:70%; 
}

前：

BEFORE

後： AFTER

改變#Content { padding:0px; min-height:70%; }

到#Content { padding:0px; height:70%; }

有人可以請我解釋一下，我怎樣才能得到具有最小高度屬性的「後狀態圖」的邊界。這裏是一個的jsfiddle周圍的混亂中：Link

來源

2013-03-08 Moussa Harajli

是必須的PHP標籤嗎？ – Class 2013-03-08 02:06:42

不是真的不好把它摘下來...... – 2013-03-08 02:07:28

嗨是你想要照亮的''''內容'的邊框 – jhunlio 2013-03-08 02:20:01

我猜了一點，但也許會導致你想要的效果來自：

#Files { 
    border-left: 2px solid red; 
    border-right: 2px solid red; 
    min-height: 20em; 
    padding: 0 10px; 
}

我所做的邊框紅色和廣泛的清晰度，但可以改變。

要邊框一路延伸到<div id="Content">結束，你需要修改以下樣式：

#Content { 
    width:100%; 
    min-width:965px; 
    min-height:50%; 
    background-color:#FAFAFA; 
    border-bottom:1px solid #E5E5E5; 
    padding-top:50px; 
    padding-bottom: 0px; 
    font-weight:normal; 
    color:rgba(0, 0, 0, .8); 
}

請注意，您需要底部填充設置爲零。如果要強制空間和保留的邊界，你需要一個額外的元素看跌具有固定高度：

<p style="height: 50px; margin: 0;"><!-- spacing hack --></p>

這是這樣做不修改佈局的其餘部分的快速和骯髒的方式。

注意您的原始樣式表，我認爲#Content規則出現在幾個地方（原始小提琴CSS面板中的第4行和第103行）。

我的小提琴是：http://jsfiddle.net/audetwebdesign/TuRUk/1/

希望這有助於！

注：我放了一些額外的填充，但這是可選的。我不喜歡的文字坐在邊境...

關於最小高度： 爲了得到你想要的邊框工作，#Files DIV需要一個絕對測量其高度（相對一個像汽車或100％不會這樣做）。所以，我指定了min-height爲#Files（20em，但您可以調整此設置），對於小內容（幾行），邊框會一直放到底部。對於更大的文本塊，它仍然有效。

因爲你浮動其他div的方式，#Files div無法知道兄弟元素的高度，所以它可以做的最好的是繼承父級的高度，但在這種情況下，其他元素不要因爲他們漂浮。

來源

2013-03-08 03:06:09

我想邊界擴展整個灰色的div。 – 2013-03-08 03:09:18

好吧，讓我再試一次... – 2013-03-08 03:11:07

但爲什麼如果我使高度最小高度它的作品，但不是其他方式？ – 2013-03-08 23:38:54

CSS邊框不延伸整個Div

回答

相關問題