Макет коробки с переполнением авто в хром

Question

Макет коробки с переполнением авто в хром

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

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

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

Спасибо!

Редактировать:

Полный макет, который я пытаюсь сделать:

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

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

1

html5 css3 google-chrome boxlayout

Источник

user661853 18 май '12 в 16:51

3 ответа

Решение

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

Надеюсь это поможет!

1

Источник

user795961 18 май '12 в 17:35

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

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

так как то так:

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

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

вам, вероятно, понадобятся дополнительные стили, но просто помните о том, что вы прикрываете. Также, если вам нужен прокручиваемый div для работы в контексте без фиксированного заголовка, вы должны сделать дополнение к телу или создать пустой "padding" div, который может занять место. Таким образом, по мере развития вашего сайта вам не придется беспокоиться об отдельном элементе; каждый раз, когда вы меняете заголовок, он останется независимым.

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

1

Источник

user985138 18 май '12 в 18:15

Другие вопросы по тегам html5 css3 google-chrome boxlayout

user661853 22 май '12 в 14:21 2012-05-22 14:21 · Accepted Answer · 2012-05-22 14:21

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

0

Источник

user661853 22 май '12 в 14:21