在 chrome 中具有溢出自动的框布局答案

【问题标题】：box layout with overflow auto in chrome在 chrome 中具有溢出自动的框布局
【发布时间】：2012-05-22 22:21:49
【问题描述】：

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

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

【问题讨论】：

标签： html google-chrome css boxlayout

【解决方案1】：

这里做了一些 CSS 模块，效果很好 - http://jsfiddle.net/VHKbp/1/

希望这会有所帮助！

【讨论】：

感谢您的帮助。不幸的是，我的真实用例比我提供的示例更复杂。我实际上有两个独立的列需要独立滚动。

【解决方案2】：

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。这样，随着您网站的发展，您不必担心单个元素；每次更改标题时，它将保持独立。

只是要记住的东西:)

【讨论】：

我更喜欢让 div 本身滚动而不是原生浏览器滚动，但这不是必需的。我对建议的解决方案的问题是我实际上必须要独立滚动的列。（一个有自己的标题，然后在它们上面都有一个标题。

【解决方案3】：

这有点令人毛骨悚然，但 Google 似乎刚刚发布了一个更新来解决这个问题。弹性框布局现在适用于我想要的布局。

【讨论】：