1

我在 chrome 中遇到了一个奇怪的错误，但在 firefox 中没有。我创建了一个尽可能简单的示例：

<html>
<head>
    <style>
        body
        {
            width:100%;
            height:100%;
            margin:0;
            padding:0;
            display:-webkit-box;
            display:-moz-box;
            -webkit-box-orient:vertical;
            -moz-box-orient:vertical;
        }
        .scrollable
        {
            -webkit-box-flex:1;
            -moz-box-flex:1;
            overflow:auto;
            background-color:red;
            display:-webkit-box;
            display:-moz-box;
        }
        .fixed
        {
            background-color:blue;
        }
        button:hover
        {
            background-color:red;
            opacity:.2;
        }
    </style>
</head>
<body>
<div class="fixed">
    <h1>Fixed</h1>
    <button>Test</button>
</div>
<div class="scrollable">
    <div>
        <h1>Scrollable</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices nulla nec nulla vehicula a condimentum enim suscipit. Morbi accumsan est eget elit aliquet dictum bibendum ligula feugiat. Nam gravida sagittis luctus. Vestibulum cursus leo eu velit fermentum a commodo dolor imperdiet. Fusce non libero nec nisi molestie auctor et in est. Ut ac nibh est, vitae posuere velit. Quisque vulputate mattis sapien, interdum imperdiet purus placerat ornare. Aliquam erat volutpat. Phasellus est erat, suscipit non sollicitudin eget, porta et sem. Suspendisse tempor ullamcorper tellus, sed luctus magna auctor et. Sed et enim vel dolor eleifend eleifend sollicitudin at velit. Phasellus ac enim turpis. Phasellus lobortis nisi et augue sodales non fringilla tellus rutrum. Cras pretium metus facilisis metus viverra et commodo sapien viverra. Donec purus tellus, adipiscing ultricies interdum sed, aliquam feugiat nunc.</p>
        <button>Test</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices nulla nec nulla vehicula a condimentum enim suscipit. Morbi accumsan est eget elit aliquet dictum bibendum ligula feugiat. Nam gravida sagittis luctus. Vestibulum cursus leo eu velit fermentum a commodo dolor imperdiet. Fusce non libero nec nisi molestie auctor et in est. Ut ac nibh est, vitae posuere velit. Quisque vulputate mattis sapien, interdum imperdiet purus placerat ornare. Aliquam erat volutpat. Phasellus est erat, suscipit non sollicitudin eget, porta et sem. Suspendisse tempor ullamcorper tellus, sed luctus magna auctor et. Sed et enim vel dolor eleifend eleifend sollicitudin at velit. Phasellus ac enim turpis. Phasellus lobortis nisi et augue sodales non fringilla tellus rutrum. Cras pretium metus facilisis metus viverra et commodo sapien viverra. Donec purus tellus, adipiscing ultricies interdum sed, aliquam feugiat nunc.</p>
        <button>Test</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices nulla nec nulla vehicula a condimentum enim suscipit. Morbi accumsan est eget elit aliquet dictum bibendum ligula feugiat. Nam gravida sagittis luctus. Vestibulum cursus leo eu velit fermentum a commodo dolor imperdiet. Fusce non libero nec nisi molestie auctor et in est. Ut ac nibh est, vitae posuere velit. Quisque vulputate mattis sapien, interdum imperdiet purus placerat ornare. Aliquam erat volutpat. Phasellus est erat, suscipit non sollicitudin eget, porta et sem. Suspendisse tempor ullamcorper tellus, sed luctus magna auctor et. Sed et enim vel dolor eleifend eleifend sollicitudin at velit. Phasellus ac enim turpis. Phasellus lobortis nisi et augue sodales non fringilla tellus rutrum. Cras pretium metus facilisis metus viverra et commodo sapien viverra. Donec purus tellus, adipiscing ultricies interdum sed, aliquam feugiat nunc.</p>
        <button>Test</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices nulla nec nulla vehicula a condimentum enim suscipit. Morbi accumsan est eget elit aliquet dictum bibendum ligula feugiat. Nam gravida sagittis luctus. Vestibulum cursus leo eu velit fermentum a commodo dolor imperdiet. Fusce non libero nec nisi molestie auctor et in est. Ut ac nibh est, vitae posuere velit. Quisque vulputate mattis sapien, interdum imperdiet purus placerat ornare. Aliquam erat volutpat. Phasellus est erat, suscipit non sollicitudin eget, porta et sem. Suspendisse tempor ullamcorper tellus, sed luctus magna auctor et. Sed et enim vel dolor eleifend eleifend sollicitudin at velit. Phasellus ac enim turpis. Phasellus lobortis nisi et augue sodales non fringilla tellus rutrum. Cras pretium metus facilisis metus viverra et commodo sapien viverra. Donec purus tellus, adipiscing ultricies interdum sed, aliquam feugiat nunc.</p>
        <button>Test</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices nulla nec nulla vehicula a condimentum enim suscipit. Morbi accumsan est eget elit aliquet dictum bibendum ligula feugiat. Nam gravida sagittis luctus. Vestibulum cursus leo eu velit fermentum a commodo dolor imperdiet. Fusce non libero nec nisi molestie auctor et in est. Ut ac nibh est, vitae posuere velit. Quisque vulputate mattis sapien, interdum imperdiet purus placerat ornare. Aliquam erat volutpat. Phasellus est erat, suscipit non sollicitudin eget, porta et sem. Suspendisse tempor ullamcorper tellus, sed luctus magna auctor et. Sed et enim vel dolor eleifend eleifend sollicitudin at velit. Phasellus ac enim turpis. Phasellus lobortis nisi et augue sodales non fringilla tellus rutrum. Cras pretium metus facilisis metus viverra et commodo sapien viverra. Donec purus tellus, adipiscing ultricies interdum sed, aliquam feugiat nunc.</p>
        <button>Test</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices nulla nec nulla vehicula a condimentum enim suscipit. Morbi accumsan est eget elit aliquet dictum bibendum ligula feugiat. Nam gravida sagittis luctus. Vestibulum cursus leo eu velit fermentum a commodo dolor imperdiet. Fusce non libero nec nisi molestie auctor et in est. Ut ac nibh est, vitae posuere velit. Quisque vulputate mattis sapien, interdum imperdiet purus placerat ornare. Aliquam erat volutpat. Phasellus est erat, suscipit non sollicitudin eget, porta et sem. Suspendisse tempor ullamcorper tellus, sed luctus magna auctor et. Sed et enim vel dolor eleifend eleifend sollicitudin at velit. Phasellus ac enim turpis. Phasellus lobortis nisi et augue sodales non fringilla tellus rutrum. Cras pretium metus facilisis metus viverra et commodo sapien viverra. Donec purus tellus, adipiscing ultricies interdum sed, aliquam feugiat nunc.</p>
        <button>Test</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices nulla nec nulla vehicula a condimentum enim suscipit. Morbi accumsan est eget elit aliquet dictum bibendum ligula feugiat. Nam gravida sagittis luctus. Vestibulum cursus leo eu velit fermentum a commodo dolor imperdiet. Fusce non libero nec nisi molestie auctor et in est. Ut ac nibh est, vitae posuere velit. Quisque vulputate mattis sapien, interdum imperdiet purus placerat ornare. Aliquam erat volutpat. Phasellus est erat, suscipit non sollicitudin eget, porta et sem. Suspendisse tempor ullamcorper tellus, sed luctus magna auctor et. Sed et enim vel dolor eleifend eleifend sollicitudin at velit. Phasellus ac enim turpis. Phasellus lobortis nisi et augue sodales non fringilla tellus rutrum. Cras pretium metus facilisis metus viverra et commodo sapien viverra. Donec purus tellus, adipiscing ultricies interdum sed, aliquam feugiat nunc.</p>
        <button>Test</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices nulla nec nulla vehicula a condimentum enim suscipit. Morbi accumsan est eget elit aliquet dictum bibendum ligula feugiat. Nam gravida sagittis luctus. Vestibulum cursus leo eu velit fermentum a commodo dolor imperdiet. Fusce non libero nec nisi molestie auctor et in est. Ut ac nibh est, vitae posuere velit. Quisque vulputate mattis sapien, interdum imperdiet purus placerat ornare. Aliquam erat volutpat. Phasellus est erat, suscipit non sollicitudin eget, porta et sem. Suspendisse tempor ullamcorper tellus, sed luctus magna auctor et. Sed et enim vel dolor eleifend eleifend sollicitudin at velit. Phasellus ac enim turpis. Phasellus lobortis nisi et augue sodales non fringilla tellus rutrum. Cras pretium metus facilisis metus viverra et commodo sapien viverra. Donec purus tellus, adipiscing ultricies interdum sed, aliquam feugiat nunc.</p>
        <button>Test</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices nulla nec nulla vehicula a condimentum enim suscipit. Morbi accumsan est eget elit aliquet dictum bibendum ligula feugiat. Nam gravida sagittis luctus. Vestibulum cursus leo eu velit fermentum a commodo dolor imperdiet. Fusce non libero nec nisi molestie auctor et in est. Ut ac nibh est, vitae posuere velit. Quisque vulputate mattis sapien, interdum imperdiet purus placerat ornare. Aliquam erat volutpat. Phasellus est erat, suscipit non sollicitudin eget, porta et sem. Suspendisse tempor ullamcorper tellus, sed luctus magna auctor et. Sed et enim vel dolor eleifend eleifend sollicitudin at velit. Phasellus ac enim turpis. Phasellus lobortis nisi et augue sodales non fringilla tellus rutrum. Cras pretium metus facilisis metus viverra et commodo sapien viverra. Donec purus tellus, adipiscing ultricies interdum sed, aliquam feugiat nunc.</p>
        <button>Test</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices nulla nec nulla vehicula a condimentum enim suscipit. Morbi accumsan est eget elit aliquet dictum bibendum ligula feugiat. Nam gravida sagittis luctus. Vestibulum cursus leo eu velit fermentum a commodo dolor imperdiet. Fusce non libero nec nisi molestie auctor et in est. Ut ac nibh est, vitae posuere velit. Quisque vulputate mattis sapien, interdum imperdiet purus placerat ornare. Aliquam erat volutpat. Phasellus est erat, suscipit non sollicitudin eget, porta et sem. Suspendisse tempor ullamcorper tellus, sed luctus magna auctor et. Sed et enim vel dolor eleifend eleifend sollicitudin at velit. Phasellus ac enim turpis. Phasellus lobortis nisi et augue sodales non fringilla tellus rutrum. Cras pretium metus facilisis metus viverra et commodo sapien viverra. Donec purus tellus, adipiscing ultricies interdum sed, aliquam feugiat nunc.</p>
        <button>Test</button>
    </div>
</div>
</body>

本质上，我正在尝试创建一个布局，顶部有一个固定的标题，下面有一个可垂直滚动的部分，它填充了窗口的整个高度。这似乎在 chrome 和 firefox 中运行良好。我在 Chrome 中遇到的问题是按钮上的悬停效果导致窗格滚动回顶部。我的猜测是，悬停效果会导致疼痛再次出现，当它这样做时，它会滚动到顶部。

通过其他测试，它似乎是由一个带有溢出的框布局元素引起的：自动。

有没有其他人遇到过这个问题？有没有人对如何以不同方式执行此操作或修复它有任何建议？

谢谢！

编辑：

我正在尝试制作的完整布局是：

|---------------------------|
| Main Header               |
|---------------------------|
| Content Header   | Side   |
|------------------| Bar    |
|                  |        |
| Content          |        |
|                  |        |
-----------------------------

我希望“内容”和“侧边栏”独立滚动。“内容”应水平和垂直滚动，而“侧边栏”应仅垂直滚动。

4

3 回答 3

1

Dipak 提供的答案是一个很好的解决方案，除非有特定原因您宁愿拥有一个可滚动的 div 而不是使用浏览器的本机滚动。

我对此提出的唯一其他建议是，您确保可滚动的 div 有一个 padding-top 以弥补固定标题所覆盖的空间。

所以是这样的：

#header {
  position: fixed;
  height: 100px;
  width: 100%
  top: 0;
  left: 0;
}

.scrollable-div {
  display: block;
  padding-top: 100px;
}

您可能需要额外的样式，但请注意您所掩盖的内容。此外，如果您需要可滚动的 div 在不使用固定标题的情况下工作，您应该在主体上进行填充或创建一个可以占用空间的空“填充”div。这样，随着您网站的发展，您不必担心单个元素；每次更改标题时，它将保持独立。

只是要记住的东西:)

于 2012-05-18T18:15:12.297 回答
1

这里做了一些 CSS mods，它工作正常 - http://jsfiddle.net/VHKbp/1/

希望这可以帮助！

于 2012-05-18T17:35:36.997 回答
0

嗯，这有点吓人，但谷歌似乎刚刚发布了一个更新来解决这个问题。弹性框布局现在适用于我想要的布局。

于 2012-05-22T14:21:49.063 回答