Question

html代码：

<body>
   <header style="background-color:green;">header</header>
   <main>
      <p>some content</p>
      <div style="width:2000px">some wide content, makes overflow body</div>
      <p>some content</p>
   </main>
   <footer>footer</footer>
</body>

当身体中的某些内容比窗口宽时，会出现垂直滚动 - 这就是我想要的。但页眉和页脚的宽度=窗口的100％。

我想将页眉/页脚宽度扩展为内容宽度。或者（甚至更好的解决方案）页眉/页脚保持宽度100％，我看到垂直滚动（在窗口上），但是当我开始垂直滚动时，我将只滚动正文。页脚/标题保持“粘性”。我不能使用position：fixed，因为在水平滚动期间，页眉/页脚应该随内容“移动”。

Answer 1

＆＃13;

body {
  /* Take width and height of content and use flexbox layout */
  /* By default all flex items will stretch for cross axis */
  display: inline-flex;
  /* Align all blocks in columns */
  /* All items will stretch in width */
  flex-direction: column;
  /* Minimum occupy 100% of screen width */
  min-width: 100vw;
  /* Minimum occupy 100% of screen height */
  /* To get rid of horizontal scrollbar can be changed to smaller value */
  /* e.g. min-height: calc(100vh - 20px) */
  /* Replace min-height with height to also work in IE */
  min-height: 100vh;
  margin: 0;
}

.content {
 /* Emulating long content */
  width: 9999px;
  /* Take all height */
  flex: 1 0 auto;
}

/* Styles just for demo */
header {
  background-color: yellow;
}

.content {
  background-color: orange;
}

footer {
  background-color: lime;
}

＆＃13;

<header>Header</header>
<div class="content">Very long content</div>
<footer>Footer</footer>

＆＃13;

如果您需要仅针对水平方向修复header和footer，则可以通过JavaScript实现此目的：

＆＃13;

var header = document.querySelector("header");
var footer = document.querySelector("footer");

window.addEventListener("scroll", function(e) {
  var rect = document.body.getBoundingClientRect();
  header.style.marginLeft = -rect.left + "px";
  footer.style.marginLeft = -rect.left + "px";
});

＆＃13;

body {
  /* Take width and height of content and use flexbox layout */
  /* By default all flex items will stretch for cross axis */
  display: inline-flex;
  /* Align all blocks in columns */
  /* All items will stretch in width */
  flex-direction: column;
  /* Minimum occupy 100% of screen width */
  min-width: 100vw;
  /* Minimum occupy 100% of screen height */
  /* To get rid of horizontal scrollbar can be changed to smaller value */
  /* e.g. min-height: calc(100vh - 20px) */
  /* Replace min-height with height to also work in IE */
  min-height: 100vh;
  margin: 0;
}

.content {
  /* Emulating long content */
  width: 9999px;
  height: 1000px;
  /* Take all height */
  flex: 1 0 auto;
}


/* Styles just for demo */

header {
  background-color: yellow;
}

.content {
  background-color: orange;
}

footer {
  background-color: lime;
}

＆＃13;

<header>Header</header>
<div class="content">Very long content</div>
<footer>Footer</footer>

＆＃13;

溢出内容（正文）时的全宽标题

1 个答案: