Question

在我看来，这似乎是圆圈的正交，但不过我试着在这里提出这个问题。

我需要以下内容：

标题 - 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;被设定了。设置overflow-x：hidden时;滚动条消失了，但是垂直滚动条也被底部的水平滚动条滚动而不是停留在页面右侧。

在当前的IE / FF / Chrome版本中，这种行为主要是一致的。我还有一个Javascipt版本修复了窗口调整大小和垂直滚动的div，但这在IE中可怕地闪烁，这就是为什么我更喜欢纯CSS解决方案。

这是一个jsfiddle：http://jsfiddle.net/nftqjkyq/

有什么想法吗？

[编辑：添加了有关滚动条所需行为的更多详细信息]

Answer 1

<div style="width:100%;height:100px;background-color:green;">footer</div>

如果要删除小提琴上的第二个滚动条，请将页脚宽度更改为100％

解决了小提琴 http://jsfiddle.net/nftqjkyq/1/

修改试试这个http://jsfiddle.net/nftqjkyq/4/

修改使用Sticky Footer滚动溢出（这不可能仅使用css滚动固定元素）

这是一个可以更接近你想要的解决方案.....也许它可以给你指路。

试试这个小提琴：http://jsfiddle.net/nftqjkyq/10/

使用CSS

1 个答案: