HTML HR行過得去CSS削減絕對+相對定位

這裏是我的HTML代碼 -HTML HR行過得去CSS削減絕對+相對定位

<html> 
<head> 
<link type="text/css" href="/static/theme.css" rel="Stylesheet" /> 
</head> 
<body> 
<div id="footer"> 
<hr>Copyright content goes here</div> 
</body> 
</html>

內容theme.css的是

#footer { 
    position: absolute; 
    bottom: 0px; 
    color: #f00; 

}

當我查看HTML，我看到HR行可用（行的寬度）直到內容「版權內容到此爲止」。我需要確保版權內容僅在最底部可用，所以我使用絕對+相對CSS。

當我將位置更改爲相對時，它工作正常 - 我看到完整的HR線。

爲什麼絕對+相對定位「切割」HR線？

來源

2011-12-12 user837208

要回答你從字面上問的問題（「爲什麼」），這是因爲絕對定位的元素在流沒有位置，因此沒有自然的方式從外部確定其寬度。因此，他們縮小到他們的內容的大小，並且HRs沒有任何內容... – Brilliand

添加寬度：100％頁腳樣式。

#footer { 
    position: absolute; 
    bottom: 0px; 
    color: #f00; 
    width:100%; 
}

來源

2011-12-12 10:29:29

HTML HR行過得去CSS削減絕對+相對定位

回答

相關問題