Question

我的网站的固定宽度为1024px，以便更轻松地实现较小的屏幕，显示的页眉和页脚位于固定位置。

但是，当用户的宽度小于1024px时，页眉和页脚会被切断，这很好。但是，您无法水平滚动以查看其余部分。

我想要解决这个问题，它与CSS有关，但我不确定要更改/使用的属性。

页面的构造如下：

<body>
<div class='header'>
    <div class='headerbar'>
        <div class='headerleft'><h1>BMRA Web Client</h1></div>
        <div class='headerright'><!--image here--></div>
    </div>
</div>

<div class='footer'>
    <div class='headerbar'>
        <div class='footerleft'></div><div class='footermiddle'></div><div class='footerright'></div>
    </div>
</div>
</body>

Answer 1

这就像在标题中放置overflow-x: auto一样简单，宽度为100％。

 .header { 
   overflow: auto;
 }

通过这种模式，你将拥有一个100％宽度的标题，在小屏幕中你会看到它如何缩小。使用标题内部元素的硬像素定义（1024px），您的内容将具有此宽度，并且父级中的溢出允许您水平滚动它。

如果这不符合您的要求，也许您需要一个全局滚动解决方案，只需使用javascript即可。

修改

正如我们在评论中所说，您的解决方案是处理全局水平滚动并使用内容移动固定标头，例如相对或绝对标头。要做到这一点，您需要使用javascript来读取移动固定标头所需的像素数。在这里，您是完整的代码：

// when scroll
$(window).on('scroll', function(e) {
    //calculate left position
    var left = $(this).scrollLeft();
    //apply to header in negative
    $('.header').css('left', -left);
});

你喜欢看它有效吗？试试这个小提琴：

http://jsfiddle.net/fbvat00q/

编辑2

至于你需要修复背景，你必须重新激活孩子并在javascript中定位它。所以你的最终代码将是：

CSS：

.headerbar {
      position: relative;
}

使用Javascript：

$(window).on('scroll', function(e) {
    var left = $(this).scrollLeft();
    $('.headerbar').css('left', -left);
});

看到它正常工作：

http://jsfiddle.net/fbvat00q/1/

Answer 2

如果主包装器（设置为宽度：1024px的那个）没有overflow: hidden作为属性，则应该能够水平滚动。尝试将其手动设置为overflow: auto

Answer 3

Loot At This Real Example

您可以使用overflow: scroll和固定位置设置包装器，并设置内部值或您想要的spesfic样式

Answer 4

要在内容溢出容器（垂直和水平）并且具有固定维度时管理abehaviour，您可以使用CSS overflow property（有关详细信息，请参阅此链接）：

scoll ：内容溢出时滚动
隐藏：隐藏溢出的内容
visble ：查看溢出的内容，即使它不适合容器

在您的情况下，您必须将属性设置为滚动

.selector{overflow: scroll}

如果您只想管理水平溢出，可以设置 overflow-x CSS属性.selector{overflow-x: scroll}

对于垂直溢出，您可以设置 overflow-y ，.selector{overflow-y: scroll}

Answer 5

尝试设置溢出以水平滚动。 e.g：

.header {
    overflow-x: scroll;
}

在此处：W3C Link

使固定的div能够水平滚动

5 个答案:

修改

编辑2