Избавление от полосы прокрутки для позиции: абсолютная внутренняя часть позиции: относительная внутренняя часть переполнения: авто - PullRequest
Новая
       5

Избавление от полосы прокрутки для позиции: абсолютная внутренняя часть позиции: относительная внутренняя часть переполнения: авто

1 голос
/ 19 июля 2009

Эй, ребята, мой первый вопрос здесь о переполнении стека. Пытаясь заставить что-то довольно простое работать, я уверен, что упускаю что-то совершенно очевидное. Все еще привыкаешь к «стандартным» CSS, слишком много лет работаю с нефункциональными! Хех.

Итак, пример того, что я делаю: 

<div style="overflow: auto; border: 1px solid">
    hello
    <div style="position: relative; z-index: 99999; top: 0px; left: 0px;">
        <div style="z-index: 99999; overflow-y: hidden; position: absolute; overflow: hidden; height: 200px; left: 0; auto: 0">
            <ul>
                <li >New</li>
                <li >Old</li>
            </ul>
        </div>
    </div>
</div>

По сути: первый div - это контейнер, который я хотел бы автоматически переполнять при добавлении контента. Внутри этого контейнера у меня есть всплывающее меню, которое я здесь упростил. Всплывающее меню появляется (как и должно быть) прямо под «Привет».

Моя проблема, однако, заключается в том, что вместо всплывающего меню «выхода» из родительского элемента, как и следовало ожидать по абсолютной позиции, на самом деле оно вызывает появление полосы прокрутки на родительском элементе.

Я знаю, что если я возьму otu "position: родственник", он сработает, но тогда он больше не появится там, где я хочу (прямо под предыдущим элементом).

Что мне здесь не хватает?

РЕДАКТИРОВАТЬ: Пример здесь: http://marcos.metx.net/OverflowTest.htm

Ответы [ 2 ]

1 голос
/ 11 февраля 2010

Использование position: absolute вместо relative в этом среднем диве решит вашу проблему. Это дает вам (с добавленным цветом границы на самом внутреннем div):

альтернативный текст http://img.skitch.com/20100211-x8mnu5ds4exphbdbg956cuj6ea.png

А вот обновленный исходный код: 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    </head>
    <body>
        <div style="overflow: auto; border: 1px solid">
            hello
            <div style="position: absolute; z-index: 99999">
                <div style="z-index: 99999; overflow-y: hidden; position: absolute; 
                        overflow: hidden; height: 200px; left: 0; auto: 0;
                        border: 1px solid red">
                    <ul>
                        <li >New</li>
                        <li >Old</li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

Подробнее об этом см. Абсолютно позиционированный блок внутри блока с переполнением: авто или скрытый .

1 голос
/ 28 января 2010

Прежде всего - Inline Styling - это большое нет нет.

Лучше всего включить таблицу стилей и применить ее к отдельным элементам div с помощью атрибутов "id" или "class".

Пожалуйста, ознакомьтесь с css-стандартами в w3schools

Проблема в том, что вы переполнены.

auto - «Если переполнение ограничено, необходимо добавить полосу прокрутки, чтобы увидеть остальную часть содержимого» * ​​1011 *

То, что вы ищете, это "переполнение: видимый;"

...