Question

Desired outcome

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

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

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

我可能完全过度思考它，答案可能比我尝试的更简单。

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

在大多数情况下，我对这些div的设置方式没有任何限制，所以想象一下这是一个空白。

只需在最近的操作系统上使用现代浏览器。理想情况下，只有一个CSS / HTML修复，但如果绝对需要，将考虑一些JS。需要可见的滚动条（我尝试滚动条的一些版本在窗口范围之外，即不仅仅是鼠标滚动，而是单击并拖动滚动）。

Answer 1

我必须编辑我的答案，因为在阅读了Lokesh Suthar的回答后，我终于理解了你的问题！ ; - ）

没有CSS解决方案！您可以在规范（http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning）中找到原因：

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

所以你必须使用一个JS解决方案，就像Lokesh Suthar在他的回答中所链接的那样。

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

Answer 2

纯CSS解决方案。这是我更新的答案。请检查。

下面的演示链接：

Fiddle

<强> HTML

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

<强> CSS

html, body {
    margin:0;
    padding:0;
    height:100%;
}
#title-bar, #content {
    min-width:1024px;
    width:100%;
}
 #title-bar {
    position:fixed;
    top:0;
    background:#CC0000;
    height:50px;
    color:#fff;
}
#content {
    top:50px;
    position:relative;
    background:#9EC2E3;
    height:calc(100% - 50px);
    overflow:auto;
}

如果您有疑虑，请告诉我。

Answer 3

我认为这对你有用......

<强> Working Example

JS：

$(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(),
        });
    }
});

CSS：

* {
    -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;
}

API文档：

.scroll()
.innerWidth()
.width()
.scrollLeft()
.offset()
.addClass()
.removeClass()

Answer 4

使用CSS：

简而言之，position: fixed;无法实现。

正如其他答案已经提到的那样，不可能强制固定div进行滚动，因为div变为positioned in relation to the viewport（感谢@Netsurfer挖掘链接），我们无法操纵这个。

备选方案1：您可以将正文溢出设置为隐藏（从而隐藏浏览器滚动条）并添加一个新的包装器div，它使用视口单元（vh和<{1}}填充整个视口vw）。然后，您可以在此包装器中嵌套标题栏和内容div，并为其指定水平滚动条。然后你绝对将你的标题栏放在一个新的标题栏包装div上，同时将你的内容包装在一个100％（减去标题栏）高度和垂直滚动条的div中。

请参阅 jsfiddle 示例。

当您考虑所有包装时，这种方法相当丑陋...当您将1024像素的最小宽度应用于内容时，在较小的屏幕上查看时，垂直滚动条将移出视口（当您在你的帖子中提到）。您可以使用direction: rtl;在左侧放置滚动条，但滚动条向右滚动时仍会不在视图范围内。

请参阅左侧滚动条的 jsfiddle 示例。

总而言之，它不是一个很好的解决方案，只要有任何改变，就需要对跨浏览器支持进行大量测试。目前它适用于Chrome 33（我正在使用），我也在Firefox 27，Internet Explorer 11和Opera 19中成功测试过它.Safari 5.1（Windows）不喜欢它，但它应该适用于较新的Mac版本。对于Safari 5.1，您可以尝试更改为％高度并删除css calc()方法，但滚动整个内容时可能会出现问题。

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

请参阅 jsfiddle 示例。

使用jQuery：

使用jQuery，如果忘记position: fixed;，并且不需要太多代码，这将变成一项微不足道的任务。您所要做的就是绝对定位标题栏div，然后在每次滚动窗口时让它移动：

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

使用.css()比使用.offset()略快（请参阅benchmark tests）。如果JS被禁用，标题栏将只是滚动出视图。

请参阅 jsfiddle 示例。

考虑到jQuery的容易程度，我建议使用这种方法。

Answer 5

我认为这应该回答你的问题。

<强> CLICK ME

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

Answer 6

我使用绝对位置来设置高度百分比。比如标题栏，

position:fixed;
    height:6%;

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

Click for demo

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

Answer 7

您必须结合使用CSS和JavaScript。正如其他人所说，固定元素不会滚动，你不能选择它应该水平滚动而不是垂直滚动。所以JS出现了。

这是我能想到的最短的形式。这也适用于移动设备。它适用于固定元素中的内部div，它位于绝对位置并对窗口滚动事件做出反应。

以下是codepen示例：http://codepen.io/HerrSerker/pen/AJHyf

这适用于固定高度的标题。如果标题的高度不固定，则必须添加一些JavaScript，用于衡量标题的高度并添加

HTML

<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>

CSS

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;
}

的JavaScript

(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 );
  }
}())

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

7 个答案:

Fiddle

使用CSS：

使用jQuery：

HTML

CSS

的JavaScript