【发布时间】：2015-05-04 15:12:48
【问题描述】：
目前在我看来，这就像圆的正交，但我还是尝试在这里提出这个问题。
我需要以下物品：
标题 - 100% 宽度，固定在顶部
内容 - 固定宽度，垂直滚动内容
页脚 - 与内容宽度相同，固定在底部
滚动条 - 同时水平滚动内容和页脚
即底部应该只有一个水平滚动条同时滚动内容和页脚，但内容和页脚之间没有滚动条。垂直滚动条应该只影响内容。
（当然，水平滚动条应该是自动的，即仅当内容/页脚宽度大于当前视口宽度时才会出现）
我最接近的是以下 HTML/CSS：
<!doctype html>
<html>
<head>
<title>scroll attempt</title>
</head>
<body style="overflow-x:hidden;height:100vh;margin:0;">
<div style="height:100vh;display:flex;flex-direction:column;">
<div style="width:100%;height:100px;background-color:red;">header</div>
<div style="display:flex;flex-direction:column;height:100%;overflow-x:auto;overflow-y:hidden;">
<!--
the following div should only have a vertical scrollbar,
hence overflow-x:visible; - which is not respected
when setting overflow-x:hidden; the horizontal scrollbar disappears
but then the vertical scrollbar moves when scrolling horizontally
-->
<div style="flex:1;background-color:yellow;overflow-x:visible;overflow-y:auto;">
<div style="width:1200px;height:800px;background-color:orange;">scrolling</div>
</div>
<div style="width:1200px;height:100px;background-color:green;">footer</div>
</div>
</div>
</body>
</html>
不幸的是，使用这个 HTML/CSS，一个不需要的滚动条出现在围绕内部内容的 div 上，它位于内容和页脚之间，尽管 overflow-x:visible;已设置。设置溢出时-x:hidden;滚动条不见了，但随后垂直滚动条也被底部的水平滚动条滚动，而不是停留在页面的右侧。
该行为在当前的 IE/FF/Chrome 版本中大多是一致的。我还有一个 Javascipt 版本，它修复了窗口调整大小和垂直滚动上的 div，但这在 IE 中闪烁得很厉害，这就是我更喜欢纯 CSS 解决方案的原因。
这是一个 jsfiddle：http://jsfiddle.net/nftqjkyq/
有什么想法吗？
[编辑：添加了有关滚动条所需行为的更多详细信息]
【问题讨论】：
-
只是为了说明它应该如何表现，这里有一个 jsfiddle 可以按需要工作，但使用 Javascript（问题是如何在没有 Javascript 的情况下实现）：jsfiddle.net/3bhsswnv