CSS：标题全屏宽度，其他内容未包装答案

【问题标题】：CSS: header full screen width with other content unwrappedCSS：标题全屏宽度，其他内容未包装
【发布时间】：2021-08-13 10:11:23
【问题描述】：

代码：

<!DOCTYPE html>
<html><head><title>${title}</title><meta charset="utf-8" /></head>
<style>
body {
    margin: 0;
    padding: 0 20px;
    width: 300px;
    background-color: cornflowerblue;
}
div#header {
    padding: 20px 20px;
    margin: 0 -20px;
    background-color: palegoldenrod;
}
</style>
<body>

<div id="header">
    <h1><code>&lt;div id="header"&gt;</code></h1>
    <p>Page header. Page header. Page header. Page header. Page header. Page header.</p>
</div>

<h1><code>&lt;body&gt;</code></h1>
<p>Page content. Page content. Page content. Page content. Page content.</p>

</body>
</html>

给出图片：

在此布局中，如何使页眉区域为全屏宽度。不得将主要内容（div 之外的所有内容）包装到任何容器中。并且只允许我使用 HTML 和 CSS。我还需要布局尽可能简单。

更多细节。标题是固定的，因此可以（合理地）更复杂。主页内容由标记源生成，不包含布局和几何调整。虽然可以将主要上下文包装到例如div 中，但我不想这样做，因为它可能会影响渲染速度。

而且我希望固定车身宽度。

【问题讨论】：

为什么body被限制为300px宽？这是一个深思熟虑的设计策略吗？
@Professor Abronsius，是的，我希望限制主要内容的宽度。 300px 只是为了让图片更小。实际宽度会更大。 header 中的内容宽度可以调整不同的方式，只需要与主要内容相同的范围即可。

标签： html css layout

【解决方案1】：

找不到比包装页面内容更好的方法了：

<!DOCTYPE html>
<html><head><title>${title}</title><meta charset="utf-8" /></head>
<style>
body {
    margin: 0;
    padding: 20px 20px 0;
    background-color: cornflowerblue;
}
div#header_area {
    padding: 1px 20px;
    margin: -21px -20px 0;
    background-color: palegoldenrod;
}
div#header {
    width: 300px;
}
div#content {
    width: 300px;
}
</style>
<body>

<div id="header_area">
    <div id="header">
        <h1><code>&lt;div id="header"&gt;</code></h1>
        <p>Page header. Page header. Page header. Page header. Page header. Page header.</p>
    </div>
</div>

<div id="content">
    <h1><code>&lt;body&gt;</code></h1>
    <p>Page content. Page content. Page content. Page content. Page content.</p>
</div>

</body>
</html>

无论如何，它并没有完全按预期工作。向右滚动时（需要为此增加宽度）标题区域填充在右侧被删除。仍然可以接受这一点，因为在这种情况下水平滚动不一定是典型的。

看起来 CSS 标准和浏览器制造商竭尽全力让最简单的事情变得极其复杂 :)

【讨论】：

【解决方案2】：

以下工作但不够好：

div#header {
    padding: 20px 0px;
    margin: -20px -20px 0;
    background-color: palegoldenrod;
    width: 100vw;
}

当垂直滚动条出现时，它总是会导致水平滚动条，不管它是否真的需要。这对我来说是不可接受的，但也许其他人会接受。

【讨论】：

【解决方案3】：

从body 中删除width 属性。

【讨论】：

【解决方案4】：

从正文中删除宽度

body {
    margin: 0;
    padding: 0 20px;
    background-color: cornflowerblue;
}
div#header {
    padding: 20px 20px;
    margin: 0 -20px;
    background-color: palegoldenrod;
}

<body>

<div id="header">
    <h1><code>&lt;div id="header"&gt;</code></h1>
    <p>Page header. Page header. Page header. Page header. Page header. Page header.</p>
</div>

<h1><code>&lt;body&gt;</code></h1>
<p>Page content. Page content. Page content. Page content. Page content.</p>

</body>

【讨论】：