Html 为什么这个HR元素在页面的一部分停止？_Html_Css

Html 为什么这个HR元素在页面的一部分停止？

html css

Html 为什么这个HR元素在页面的一部分停止？,html,css,Html,Css,这很难解释。这把小提琴应该显示发生了什么：我所做的是将一个页面划分为页眉和内容div。在页眉的底部，我有一个HR元素，然后我重新定位了一些“按钮”——它们只是样式很重的链接——因此它们位于页眉和内容div之间的HR中间代码如下： html,body{ height: 100%; width:100%; margin: 0; } #header { position: fixed; top: 0; left: 0; right: 0; h

这很难解释。这把小提琴应该显示发生了什么：

我所做的是将一个页面划分为页眉和内容div。在页眉的底部，我有一个HR元素，然后我重新定位了一些“按钮”——它们只是样式很重的链接——因此它们位于页眉和内容div之间的HR中间

代码如下：

html,body{
  height: 100%;
  width:100%;
  margin: 0;
}

#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    z-index: 5;
}

#content {
    position: fixed;
    top: 100px;
    bottom: 100px;
    left: 0;
    right: 0;
    background-color: white;
    overflow: auto;
    z-index: 4;
}

.hr {
    border-bottom: 2px solid red;
    clear: both;
    width: 100%;
}

#buttons .hr {
    margin-top: -16px;
    color: #ddd;
}

#buttons a {
    border: 1px solid #32b8eb;
    background-color: white;
    padding: 4px 24px;
    margin-left: 30px;
    height: 32px;
    line-height: 32px;
}

<body class="page">
    <div id="header">

        <div id="buttons" style="position: absolute; top: 83px;">
            <a class="" href="/Home/NewJob">New Job</a>
            <a class="active" href="/">Job List</a>
            <div class="hr"></div>
        </div>

    </div>
    <div id="content">
    </div>
 </body>

html，正文{
身高：100%；
宽度：100%；
保证金：0；
}
#标题{
位置：固定；
排名：0；
左：0；
右：0；
高度：100px；
z指数：5；
}
#内容{
位置：固定；
顶部：100px；
底部：100px；
左：0；
右：0；
背景色：白色；
溢出：自动；
z指数：4；
}
.hr{
底部边框：2倍纯红；
明确：两者皆有；
宽度：100%；
}
#按钮，hr{
利润上限：-16px；
颜色：#ddd；
}
#按钮a{
边框：1px实心#32b8eb；
背景色：白色；
填充：4px24px；
左边距：30px；
高度：32px；
线高：32px；
}

但是，正如您在小提琴中看到的，存在一个问题：即使最右边的按钮的宽度设置为100%，HR也会在按钮后停止显示。为什么？

这是因为

div#按钮是绝对定位的，它占据了内容的宽度。您可以通过以下任一方式使其全宽：

宽度：100%
左：0；右：0


或者，您可以在全宽父元素上使用边框底部

#标题{
边框底部：2倍实心#000；
}


html，
身体{
身高：100%；
宽度：100%；
保证金：0；
}
#标题{
位置：固定；
排名：0；
左：0；
右：0；
高度：100px；
z指数：5；
}
#内容{
位置：固定；
顶部：100px；
底部：100px；
左：0；
右：0；
背景色：白色；
溢出：自动；
z指数：4；
}
.hr{
底部边框：2倍纯红；
明确：两者皆有；
宽度：100%；
}
#按钮，hr{
利润上限：-16px；
颜色：#ddd；
}
#按钮a{
边框：1px实心#32b8eb；
背景色：白色；
填充：4px24px；
左边距：30px；
字体大小：正常；
高度：32px；
字号：18px；
文本转换：大写；
线高：32px；
字体系列：Calibri；
颜色：黑色；
文字装饰：无；
光标：指针；
}
#标题{
边框底部：2倍实心#000；
}
用底部代替hr作为标题如何


html，正文{
身高：100%；
宽度：100%；
保证金：0；
}
#标题{
底部边框：2倍纯红；
高度：100px；
左：0；
位置：固定；
右：0；
排名：0；
宽度：100%；
z指数：5；
}
#内容{
位置：固定；
顶部：100px；
底部：100px；
左：0；
右：0；
背景色：白色；
溢出：自动；
z指数：4；
}
.hr{
底部边框：2倍纯红；
明确：两者皆有；
宽度：100%；
}
#按钮，hr{
利润上限：-16px；
颜色：#ddd；
}
#按钮a{
边框：1px实心#32b8eb；
背景色：白色；
填充：4px24px；
左边距：30px；
字体大小：正常；
高度：32px；
字号：18px；
文本转换：大写；
线高：32px；
字体系列：Calibri；
颜色：黑色；
文字装饰：无；
光标：指针；
}
为什么不在页眉上使用边框底部
？