Скрытие Overflow-x фиксированной позиции DIV на внешних DIV

Question

Скрытие Overflow-x фиксированной позиции DIV на внешних DIV

0

У меня есть такой макет:

<div class="mainContent" style="overflow-y: scroll !important; width: 100%">
  <div class="leftPanel" style="overflow: hidden; width: 225px;">
  </div>
  <div class="rightPanel" style="overflow: hidden;">
    <div class="dataPanel" style="width:21355px; height:3253px;">
      <div class="topPanel"  style="position:fixed; width:21355px;">
      </div>
      <div class="bottomPanel">
      </div>
    </div>
  </div>
</div>

Верхняя панель должна находиться в фиксированном положении, чтобы она не прокручивалась вертикально (ось y) с остальными данными, содержащимися в mainContent, но topPanel также должна оставаться в пределах rightPanel вдоль оси x. Я попытался использовать overflow-x: скрытый на каждом внешнем div, но из-за наличия позиции: исправлено на topPanel, он игнорирует этот атрибут.

Я искал некоторое время, и самое близкое решение, которое я нашел, это использовать:

clip: rect(0px 750px 900px 0px);

который перекрывал бы переполнение topPanel вдоль оси x, но если пользователь прокручивается влево или вправо (что они будут делать), его нужно будет перенастроить каждый раз, что не кажется правдоподобным решением.

Смотрите здесь скрипку. Обратите внимание на "Верх", который переполняется справа от всех контейнеров div.

http://jsfiddle.net/3RLYm/

user1060406 16 апр. 2014, в 17:44

Источник

0

Поделитесь своим CSS, а также.
TylerH 16 апр. 2014, в 15:23
0

Применяются только CSS-атрибуты в атрибуте "style" DIVs выше. В данном случае класс является не чем иным, как идентификатором.
user1060406 16 апр. 2014, в 15:31
0

Использование чего-то вроде jsfiddle в качестве примера вашей проблемы помогает тонне визуализировать это и экономит тех, кто ищет дополнительное время для устранения неполадок для вас. Просто совет.
Chris W. 16 апр. 2014, в 15:32
0

Спасибо за предложения Крис У. Я добавил скрипку. «Верх», переполненный вправо, идентифицирует проблему.
user1060406 16 апр. 2014, в 16:11

Показать ещё 2 комментария

Теги:

html

css

css-position

fixed

1 ответ

Ещё вопросы

Применяются только CSS-атрибуты в атрибуте "style" DIVs выше. В данном случае класс является не чем иным, как идентификатором.
Использование чего-то вроде jsfiddle в качестве примера вашей проблемы помогает тонне визуализировать это и экономит тех, кто ищет дополнительное время для устранения неполадок для вас. Просто совет.
Спасибо за предложения Крис У. Я добавил скрипку. «Верх», переполненный вправо, идентифицирует проблему.

ericlucas23 · Answer 1 · 2014-04-16T15-38-00.000Z

Я думаю, проблема заключается в том, что вы используете позицию: fixed; когда вы используете фиксированное позиционирование, вы берете элемент из обычного потока документа и привязываете его к определенной области. После этого атрибуты переполнения больше не применяются. В приведенном ниже примере я использовал свойства "right" и "left" для блокировки сторон "верхнего" div и удаления "width". Очевидно, вам придется настроить эти значения в соответствии с вашими потребностями, но это направление, в котором я бы пошел.

topPanel
{
position: fixed;
right: 10px;
left: 250px;
border: solid 4px purple;
}

http://jsfiddle.net/3RLYm/35/

Правильно, и это проблема, с которой я столкнулся. Регулировка вправо и влево просто смещает переполнение, как я уже пробовал. Я ценю ваше понимание, но я ищу обходной путь для проблемы, вызванной фиксированным позиционированием.
Если вы удалите свойство 'width' и воспользуетесь позицией вправо и влево, чтобы определить ширину верхнего заголовка, переполнения не будет. Посмотрите мою ссылку на скрипку вверху, чтобы проиллюстрировать, что я имею в виду.
Я понимаю это, но мне нужна ширина, чтобы соответствовать ширине "dataPanel". Они должны быть одинаковой ширины, чтобы они были на одном уровне друг с другом.