圍繞我所有頁面的身體邊框（未固定）

我想要的是圍繞我所有的頁面內容創建一個邊框，頂部邊框很好，但是其他邊框，特別是底部邊框沒有放置在我想要的位置，我希望它永遠在我的頁面底部。圍繞我所有頁面的身體邊框（未固定）

html, 
 
body { 
 
    min-height: 100%; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 45px; 
 
    min-height: 100%; 
 
    z-index: 1; 
 
} 
 

 
#barTop, 
 
#barLeft, 
 
#barBottom, 
 
#barRight { 
 
    display: block; 
 
    position: absolute; 
 
    background-color: #f8ee53; 
 
    z-index: 2; 
 
} 
 

 
#barTop, 
 
#barBottom { 
 
    right: 20px; 
 
    left: 20px; 
 
    height: 25px; 
 
} 
 

 
#barTop { 
 
    top: 20px; 
 
} 
 

 
#barBottom { 
 
    bottom: 20px; 
 
} 
 

 
#barLeft, 
 
#barRight { 
 
    top: 20px; 
 
    bottom: 20px; 
 
    width: 25px; 
 
} 
 

 
#barLeft { 
 
    left: 20px; 
 
} 
 

 
#barRight { 
 
    right: 20px; 
 
}

<div id="barTop"></div> 
 
<div id="barRight"></div> 
 
<div id="barBottom"></div> 
 
<div id="barLeft"></div>

結果： 我的邊界不包括我的網頁上的所有內容。

來源

2017-08-28 Khalil Djahli

當你位置的元素絕對它是從文檔流中去除。你爲什麼不把你的內容包裝在一個div中，並給它你需要的邊界？ – j08691

@ j08691但是，當我將圖像放在邊界下方時（例如左側角落），我無法使用z-index！ –

刪除此：

html, 
body { 
    min-height: 100%; 
    height: 100%; 
}

，並使用此

body { 
    margin: 0; 
    padding: 45px; 
    min-height: 100%; 
    z-index: 1; 
} 

#barTop, #barLeft, #barBottom, #barRight { 
    display: block; 
    position: absolute; 
    background-color: #f8ee53; 
    z-index: 2; 
} 
#barTop, #barBottom { 
    right: 20px; 
    left: 20px; 
    height: 25px; 
} 
#barTop { 
top: 20px; 
} 
#barBottom { 
    bottom: 20px; 
} 
#barLeft, #barRight { 
    top: 20px; 
    bottom:20px; 
    width: 25px; 
} 
#barLeft { 
    left: 20px; 
} 

#barRight { 
    right: 20px; 
}

來源

2017-08-28 16:46:31

不做任何更改，我想要的是圍繞我的網頁與該邊框的所有內容，我希望底部邊框總是在我的頁面底部。 –

您應該能夠通過添加現有機構選擇在下列來解決這個：

body { 
    box-sizing: border-box; 
}

我做了一個jsfiddle來演示它，並在黑色背景上體以更好地說明它：

JS Fiddle

來源

2017-08-28 16:48:02

我已經試過這個，但它沒有解決它。 –

問題是由於本體上的填充引起的。當高度計算爲100％時不考慮它。刪除填充或做什麼mtr網絡建議，並添加box-sizing: border-box;運行下面的代碼片段，看看它的工作。

html, 
 
body { 
 
    min-height: 100%; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 45px; 
 
    min-height: 100%; 
 
    z-index: 1; 
 
    box-sizing: border-box; 
 
} 
 

 
#barTop, 
 
#barLeft, 
 
#barBottom, 
 
#barRight { 
 
    display: block; 
 
    position: absolute; 
 
    background-color: #f8ee53; 
 
    z-index: 2; 
 
} 
 

 
#barTop, 
 
#barBottom { 
 
    right: 20px; 
 
    left: 20px; 
 
    height: 25px; 
 
} 
 

 
#barTop { 
 
    top: 20px; 
 
} 
 

 
#barBottom { 
 
    bottom: 20px; 
 
} 
 

 
#barLeft, 
 
#barRight { 
 
    top: 20px; 
 
    bottom: 20px; 
 
    width: 25px; 
 
} 
 

 
#barLeft { 
 
    left: 20px; 
 
} 
 

 
#barRight { 
 
    right: 20px; 
 
}

<div id="barTop"></div> 
 
<div id="barRight"></div> 
 
<div id="barBottom"></div> 
 
<div id="barLeft"></div>

來源

2017-08-28 17:43:27 sn3ll

但是，當我將更新後的代碼添加到文本中時，我遇到了同樣的問題。邊框不包括我的所有內容。 –

圍繞我所有頁面的身體邊框（未固定）

回答

相關問題