html HR行被css绝对+相对定位剪切_Html_Css_Stylesheet_Css Position

html HR行被css绝对+相对定位剪切

html css

html HR行被css绝对+相对定位剪切,html,css,stylesheet,css-position,Html,Css,Stylesheet,Css Position,这是我的HTML代码- <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> 当我查看HTM

这是我的HTML代码-

<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>

当我查看HTML时，我看到HR行是可用的，只有在内容版权内容转到这里时才可用。我需要确保版权内容只在最底层可用，所以我使用绝对+相对CSS

当我将“职位”更改为“相对”时，它工作正常-我看到完整的人力资源行

为什么绝对+相对定位会切割HR线条？

添加宽度：100%到页脚样式

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

将宽度：100%添加到页脚样式

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

为了回答您字面上提出的问题，这是因为绝对定位元素在流中没有位置，因此没有从外部确定其宽度的自然方式。因此，它们缩小到其内容的大小，并且由于HR没有任何内容……为了回答您字面上提出的问题，这是因为绝对定位元素在流中没有位置，因此没有从外部确定其宽度的自然方式。因此，他们缩小到内容的大小，而且因为HRs没有任何内容。。。