使边框覆盖最大宽度答案

【问题标题】：make a border override max-width使边框覆盖最大宽度
【发布时间】：2016-06-07 22:26:35
【问题描述】：

我有一个带有max-width: 1200px; 的正文和导航栏。导航栏有一个border-top: 1em solid blue;。导航栏本身在向下滚动时会消失，而在向上滚动时会重新出现。我刚刚被要求将顶部边框扩展到整个视口宽度，从而覆盖其包含 div 的max-width: 1200px;。如果我向正文添加顶部边框并调整导航栏填充以不覆盖顶部导航栏，则向上滚动时由于添加的填充而存在间隙。该网站已经上线，我不想破坏所有其他样式。有没有办法扩展导航栏的顶部边框而无需更改任何其他内容？

【问题讨论】：

您是否考虑过在父元素上使用伪元素，并将其设置为全角，显示block 并声明min-height？尝试使用您当前使用的标记和样式嵌入堆栈代码 sn-p（请参阅格式选项）。
提供某种功能的 sn-p 很有帮助，这样我们就可以尝试诊断问题。
底线 - 你的父元素有 max-width 并且你希望孩子更宽。您可以通过在父级上声明overflow:visible 并给子级100vw 宽度来实现这一点。您也可以将孩子设为position:absolute，然后将其从父元素中取出（这就是我的建议）

标签： jquery html twitter-bootstrap css

【解决方案1】：

正如@Hungerstar 所提到的，伪元素在这里是最佳选择。

我更喜欢 CSS3 解决方案，其中包含一个 100vw 宽度的伪元素，然后用 transform 翻译回来。

这消除了对 overflow 的需要。

ul, li {
  margin: 0;
  padding: 0;
  display: inline-block;
}
body {
  margin: 5px 0 0;
}
header {
  position: relative;
  margin: 0 auto;
  max-width: 400px;
  border: 1px dashed #6DA76D;
}
header:after {
  content: ' ';
  position: absolute;
  top: 0;
  left: 50%;
  height: 5px;
  
  transform:translate(-50%,-100%);
  width:100vw;

  background: pink;
}

<header>
  <nav>
    <ul>
      <li>Nav One</li>
      <li>Nav Two</li>
    </ul>
  </nav>
</header>

【讨论】：

我总是忘记translate。

【解决方案2】：

您可以使用伪元素并将其拉伸到父元素之外。

<header>
  <nav>
    <ul>
      <li>Nav One</li>
      <li>Nav Two</li>
    </ul>
  </nav>
</header>

ul, li {
  margin: 0;
  padding: 0;
  display: inline-block;
}
body {
  margin: 5px 0 0;
  overflow: hidden;
}
header {
  position: relative;
  margin: 0 auto;
  max-width: 400px;
  border: 1px dashed #6DA76D;
}
header:after {
  content: ' ';
  position: absolute;
  top: -5px;
  right: -99em;
  left: -99em;
  border-top: 5px solid skyblue;
}

这里我们将伪元素绝对定位到父元素。我们通过应用负边距将其拉到父级之外。这些负边距非常大，会导致水平滚动条。你必须使用overflow: hidden; 来摆脱它。在我的示例中，我是在 <body> 上执行此操作的。

演示JSFiddle.

【讨论】：