html - 使用固定的 div 布局和最小宽度滚动

Question

我一直在尝试布局此页面，但就我的生活而言，似乎无法让它按我想要的方式工作。

Window = black
Titlebar = red
Content div = blue
Vertical scrollbar = green
Horizontal scrollbar = yellow

最小标题栏/内容 div 宽度为 1024 像素，会增长到窗口大小。

我可能完全想多了，答案可能比我尝试的要简单得多。

基本上我想在页面顶部有一个固定的标题栏 div，它永远不会垂直滚动。如果它不适合水平窗口，我希望水平滚动条滚动标题栏和内容。如果内容 div 高于窗口高度，我希望它滚动，否则我希望它延伸到页面底部。

在大多数情况下，我对如何设置这些 div 几乎没有任何限制，所以想象一下有一张白纸。

需要在最新操作系统上的现代浏览器上工作。理想情况下只有 CSS/HTML 修复，但如果绝对需要，会考虑一些 JS。需要可见的滚动条(我试过滚动条的一些版本在窗口范围之外关闭，即，不仅是鼠标滚轮滚动，还有点击和拖动滚动)。

Answer 1

我必须编辑我的答案，因为在阅读了 Lokesh Suthar 的答案后我终于明白了你的问题! ;-)

没有CSS解决方案!您会在规范 ( http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning ) 中找到原因:

Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport. For continuous media, fixed boxes do not move when the document is scrolled.

因此，您必须采用 JS 解决方案，就像 Lokesh Suthar 在他的回答中所链接的那样。

个人笔记:
通常网页设计师会不惜一切代价避免使用水平滚动条!
它们的可用性“不好”，大多数用户讨厌水平滚动。而不是让一个固定定位的元素比视口(viewport)更宽，你应该扩大它的高度。
记住:如果禁用 JS，在此使用 JS 解决方案将使内容无法访问/不可见!