如何在其浮动主 div 之外获取 header 并将其全宽放置在页面顶部

Question

我有一个常见的 HTML 结构，由 73% 宽度 div 向左浮动，包含几个元素，其中之一是 header。右侧边栏浮动了 23% 的宽度。

<div class="primary">
    <header>
    </header>
</div>

<div class="sidebar">
</div>

是否可以让 header（嵌套在第一个 div 中）在页面顶部全宽显示在 parent [=26] 下方=] 在左边，边栏在右边？

所有这一切，无需更改 HTML 结构并在其 parent div 之外获取 header。

基本上，我有这个 what I have but I would like to get that what I would like 没有改变结构。

谢谢

Answer 1

是的，这是可能的。但解决方案有点老套。如果您有能力更改 html，那将是最好的，但如果没有，您可以：

制作 body、position: relative; 并将您的 header 设置为 position:absolute。现在您可以将 header 移动到相对于 body.

的任何位置

如果您将 margin-top 添加到 body，那么您将有一些 white-space 可以放置您的 header。将 header 宽度设置为 100%，为您的 header 设置高度以匹配您为 body 提供的边距量，然后繁荣。

还有其他方法可以做到这一点，但这是一种。

body {
  position: relative;
  margin:0;
  margin-top: 50px;
  width: 100%;
}

div.primary {
  width:73%;
  float:left;
  background-color: yellow;
  color:black;
  text-align:center;
  font-size: 2em;
}

div.sidebar{
  float:right;
  width: 23%;
  background-color: red;
  text-align:center;
  font-size: 2em;
}

header {
  box-sizing: border-box;
  width: 100vw;
  top: -50px;
  left: 0;
  background-color: lightblue;
  position: absolute;
  height: 50px;
}

p {
  text-align: center;
}

<div class="primary">
    PRIMARY
    <header>
        HEADER
    </header>
</div>

<div class="sidebar">
    SIDEBAR
</div>

如何在其浮动主 div 之外获取 header 并将其全宽放置在页面顶部

How to get a header outside of its floated primary div and place it full width on the top of the page

html

css

full-width