侧边栏和主要内容位于 window 中心，不在同一个父容器中

Question

我正在编辑一个使用 Vector 皮肤的 MediaWiki 站点（维基百科和 MediaWiki 官方网站本身使用的相同）。这个皮肤有一个固定宽度的侧边栏和一个可调整宽度的主要内容，它填充了 window 的其余部分。我需要对主要内容应用固定宽度，并将浮动在 window 中心的两个元素并排放置。问题是我不能简单地将 "margin: 0 auto;" 应用于父容器，因为它们不在同一个容器中，皮肤的结构如下：

<body>
  <div id="content" class="mw-body"></div> // Main content
  <div id="mw-navigation">
    <div id="mw-head"> // Header
    <div id="mw-panel"> // Sidebar
  </div>
  <div id="footer"> // Footer
</body>

然后使用 position: absolute; 进行定位；但我不知道如何做我想做的事，而不会使设计随着 window 调整大小而完全扭曲。我还尝试将宽度和边距应用于正文，但浏览器完全忽略了样式。如何在不触及皮肤核心的情况下用纯 CSS 做到这一点？谢谢！

编辑： 很抱歉没有添加 fiddle，但由于我为皮肤本身提供了 link，所以我认为没有必要.嗯，这是目前皮肤的基本结构：

https://jsfiddle.net/gg2dv8g9/

我需要做这样的事情：

https://jsfiddle.net/gg2dv8g9/1/

但是第二个 fiddle 需要使用父容器，皮肤没有，我不能添加，因为我只允许修改 CSS。

Answer 1

假设您不能简单地将 max-width 应用到 body 标签并将其 margin 设置为 auto，您可以使用 flexbox (See also). I'm also assuming the div you labelled as the header is the page header and should appear at the top of the page so I've provided some positioning for that in the code below for you. Don't forget to prefix the properties below as necessary.

*{box-sizing:border-box;margin:0;padding:0;}
body{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  padding:50px;
  position:relative;
}
#mw-head{
  background:#000;
  height:50px;
  left:50%;
  position:absolute;
  top:0;
  transform:translatex(-50%);
  width:100%;
  max-width:500px;
}
#content{
  background:#f00;
  flex:0 1 calc(100% - 100px);
  height:100px;
  max-width:400px;
}
#mw-navigation{
  background:#0f0;
  flex:0 1 100px;
}
#footer{
  background:#000;
  page-break-before:always;
  break-before:always;
  height:50px;
  width:100%;
  max-width:500px;
}

<div id="content"></div>
<div id="mw-navigation">
  <div id="mw-head"></div>
  <div id="mw-panel"></div>
</div>
<div id="footer"></div>

侧边栏和主要内容位于 window 中心，不在同一个父容器中

Sidebar and main content centered in the window without being in the same parent container

css

mediawiki