расположение коробки с переполнением auto в chrome

У меня есть странная ошибка в хроме, но не firefox. Я создал в качестве простого примера, как можно:расположение коробки с переполнением auto в chrome

<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, заключается в том, что эффект наведения на кнопки заставляет панель перемещаться назад. Я предполагаю, что эффект наведения приводит к тому, что боль снова появляется, и когда она это делает, она прокручивается вверх.

С помощью других тестов, похоже, это связано с наличием элемента макета коробки с переполнением: auto на нем.

Есть ли у кого-нибудь еще такая проблема? У кого-нибудь есть предложения по тому, как это сделать по-другому или исправить?

Спасибо!

Edit:

Полная раскладка Я пытаюсь сделать это:

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

Я хотел бы "Содержание" и "Side Bar" для прокрутки независимо друг от друга. «Контент» должен прокручиваться как по горизонтали, так и по вертикали, в то время как «Боковая панель» должна прокручиваться только вертикально.

источник

2012-05-18 drewag

Ну это своего рода жуткий, но мне кажется, что Google выпустила обновление, которое устраняет эту проблему. Теперь макет гибкой коробки работает для моего желаемого макета.

источник

2012-05-22 14:21:49 drewag

Вот сделал некоторые CSS модов и она отлично работает - http://jsfiddle.net/VHKbp/1/

Надеется, что это помогает!

источник

2012-05-18 17:35:36 Dipak

Благодарим за помощь. К сожалению, мой реальный прецедент более сложный, чем пример, который я представил. На самом деле у меня есть два независимых столбца, которые нужно прокручивать независимо. – drewag

Ответ, который был предоставлен компанией Dipak, является хорошим решением, если нет конкретной причины, по которой у вас есть прокручиваемый div, против использования родного прокрутки браузера.

Единственное другое предложение, которое я хотел бы сделать, заключается в том, что вы убедитесь, что прокручиваемый div имеет верхнюю часть, чтобы компенсировать пространство, покрытое фиксированным заголовком.

так что-то вроде этого:

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

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

вам, вероятно, потребуются дополнительные стили, но просто совесть, что вы порука. Кроме того, если вам нужен прокручиваемый div для работы в контексте w/out с использованием фиксированного заголовка, вы должны сделать прописку на теле или создать пустой «дополняющий» div, который может занимать место. Таким образом, когда ваш сайт развивается, вам не придется беспокоиться об отдельном элементе; каждый раз, когда вы меняете заголовок, он останется независимым.

Просто вещи, чтобы иметь в виду :)

источник

2012-05-18 18:15:12 Brodie

Я предпочитаю прокручивать сам div, а не прокрутку собственного браузера, но это не является обязательным требованием. Проблема с предлагаемым решением заключается в том, что на самом деле у меня есть столбцы, которые нужно самостоятельно прокручивать.(У одного есть свой собственный заголовок, а затем над ними оба заголовка. – drewag

расположение коробки с переполнением auto в chrome

ответ

Смежные вопросы