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

我一直在尝试布局这个页面，但对于我来说，似乎无法让它按我想要的方式工作

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

标题栏/内容分区的最小宽度为1024px，扩展到窗口大小

我可能想得太多了，答案可能比我想的要简单得多

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

在大多数情况下，我对如何设置这些div几乎没有任何限制，所以想象一下有一块空白的石板

---

只需要在最新的操作系统上使用现代浏览器。理想的只是一个CSS/HTML补丁，但是如果需要的话会考虑一些JS。需要可见的滚动条（我尝试过的一些版本的滚动条不在窗口范围内，即，不仅仅是鼠标滚轮滚动，而是点击并拖动滚动）。

我认为这应该回答您的问题

---

基本上，这家伙正在尝试使用滚动事件移动固定导航（如他所说，使用左属性）

我必须编辑我的答案，因为在阅读了洛克什·萨塔尔的答案后，我终于理解了你的问题！；-）

没有CSS解决方案！ 您可以在规范（）中找到原因：

固定定位是绝对定位的一个子类。唯一的区别是，对于固定位置的长方体，包含的块由视口建立。对于连续介质，固定框在滚动文档时不会移动

所以你必须使用JS解决方案，就像Lokesh Suthar在回答中提到的那样

个人提示：
通常网页设计师会不惜一切代价避免水平滚动条
它们的可用性“不好”，大多数用户讨厌水平滚动。 不要使固定定位的元素比视口宽，而应该扩展其高度。
请记住：如果禁用JS，则在该服务器上使用JS解决方案将使内容无法访问/不可见

纯CSS解决方案。 这是我最新的答案。请查收

演示链接如下：

HTML

<div id="title-bar">Title Bar</div>
<div id="content">Contents</div>

---

如果您有任何疑问，请告诉我。

我使用“绝对位置”设置高度的百分比。 就像titlebar一样

position:fixed;
    height:6%;

如果不想使用，可以移除包装

---

如果需要更改，请告诉我更多信息

我想这可能适合您

JS:

CSS:

API文档：

使用CSS： 简而言之，不可能使用

位置：固定

正如其他答案中已经提到的，强制固定div滚动是不可能的，因为div会变为（感谢@Netsurfer挖掘链接），我们无法操纵它


备选方案1:您可以将主体溢出设置为隐藏（从而隐藏浏览器滚动条），并添加一个新的包装器div，该包装器div使用视口单位（
vh
和
vw
）填充整个视口。然后将标题栏和内容div嵌套在此包装器中，并为其提供一个水平滚动条。然后将标题栏相对于新标题栏包装div进行绝对定位，同时将内容包装在具有100%（减去标题栏）高度和垂直滚动条的div中

请参见示例

当你考虑所有的包装纸时，这种方法很难看。此外，当您对内容应用1024像素的最小宽度时，在较小屏幕上查看时，垂直滚动条将移出视口（如您在文章中所述）。您可以使用
方向：rtl，但向右滚动时，滚动条仍将消失

请参见左侧带有滚动条的示例

总而言之，它不是一个伟大的解决方案，在任何事情发生变化时，都需要对跨浏览器支持进行严格测试。目前它可以在Chrome33（我正在使用）上运行，我还成功地在Firefox27、InternetExplorer11和Opera19上测试了它。Safari 5.1（windows）不喜欢它，但它应该可以在较新的Mac版本上工作。对于Safari 5.1，您可以尝试更改为%高度并删除css
calc（）
方法，但滚动整个内容时可能会遇到问题


备选方案2:等待。将来您可以使用
position:sticky
以完全实现您想要的功能（假设此新属性获得完全的浏览器支持）。如果启用“启用实验性Web平台功能”下的“启用实验性Web平台功能”选项，您可以在chrome上看到它的实际应用chrome://flags/“

请参见示例


使用jQuery：
对于jQuery，如果您忘记了
position:fixed，并且不需要太多代码。您只需绝对定位标题栏div，然后在每次滚动窗口时告诉它移动：

$window.scroll(function() {
    $(".title").css('top', $window.scrollTop() + "px");
});

使用
.css（）
比使用
.offset（）
稍微快一点（请参阅）。
如果JS被禁用，标题栏将简单地从视图中滚动出去

请参见示例


考虑到jQuery有多么简单，我建议使用这种方法。
您必须结合使用CSS和JavaScript。正如其他人所说，固定元素不会滚动，您不能选择它应该水平滚动而不是垂直滚动。所以JS来了

这是我能想到的最短的表格。这也适用于移动设备。它与固定元素中的内部div一起工作，固定元素定位为绝对并对
$(window).scroll(function () { // on scroll
    var win = $(window);
    var title = $('.title');
    var winWidth = $(window).innerWidth();
    var titleWidth = title.width();
    if (win.scrollLeft() >= titleWidth - winWidth) { // if scrolled to the right further than .title is wide minus the window's width
        title.addClass('fixed'); // add the fixed class
        title.offset({ //keep the title bar at the top 
            top: win.scrollTop(),
        });
    } else { // if not
        title.removeClass('fixed'); // removed class fixed
        title.offset({ // keep the title bar at the top anyway
            top: win.scrollTop(),
        });
    }
});

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    width: 1024px;
    height:100%
}
.title {
    background:red;
    position: absolute;
    z-index:2;
    min-width: 100%;
}
#content {
    background: blue;
    padding-top:50px;
    min-width:1024px;
    min-height:100%;
}
.fixed {
    position: fixed;
    right: 0;
}

$window.scroll(function() {
    $(".title").css('top', $window.scrollTop() + "px");
});

<div id="maker"></div>
<header><div id="header_inner">Lorem ipsum dolor sit amet.</div></header>
<main><div id="#main_inner">Lorem ipsum dolor sit amet ...</div></main>

html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  overflow: auto;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#maker {
  width: 1024px;
  height: 1px;
  margin-top: -1px;
  background: red;
}
header {
  position: fixed;
  min-width: 1024px;
  background: black;
  color:white;
  width: 100%;
  height: 50px;
}
#header_inner {
  padding: 10px;
}
main {
  padding: 0px;
  padding-top: 50px;
  min-height: 100%;
  min-width: 1024px;
  background: gold;
  color: brown;
}
#main_inner {
  padding: 20px;
}

(function() {
  var headerInner = document.getElementById('header_inner');
  headerInner.style.position = 'absolute';
  var scrollReact = function() {          
    headerInner.style.left = '-'+self.pageXOffset+'px';
  }
  if ('addEventListener' in self) {
    self.addEventListener('scroll', scrollReact);
  } else if (typeof self.attachEvent == 'function') {
      self.attachEvent('scroll', scrollReact );
  }
}())