CSS: исправлен заголовок на div с полосой прокрутки, начиная с NEXT до заголовка

0

Я ищу решение только для CSS, чтобы создать фиксированный заголовок в div, где полоса прокрутки для содержимого начинается рядом с заголовком (а не ниже). Чтобы понять, как это должно выглядеть, взгляните на эту скрипку:

http://jsfiddle.net/V4uL6/

Здесь я попытался сделать следующий подход:

HTML

<div class="outer">
    <div class="top">Title</div>
    <div class="body">
        <div class="content">
            .... Text Content here ...
        </div>
    </div>
</div>

CSS

.outer {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 200px;
    height: 300px;
}

.top {
    z-index: 2;
    position: absolute;
    height: 30px;
    width: 100%;
}

.body {
    z-index: 3;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.content {
    margin-top: 30px;
}

Проблема с этим подходом заключается в том, что содержимое лежит поверх заголовка (вы увидите его, как только начнете прокрутку). Однако, похоже, это действительно близко к решению. Но поскольку я ничего не нашел в Интернете, я боюсь, что это возможно только с JavaScript. Так это правда или есть решение только для CSS для этой проблемы?

  • 0
    это было то, что вы искали?
  • 0
    @ Amir5000 Спасибо, но нет. Есть та же проблема, что я обсуждал с Хигараном. Вы вручную подгоняете заголовок к размеру полосы прокрутки, что не является надежным решением, поскольку разные браузеры имеют разные полосы прокрутки. Когда я открываю вашу скрипку в Chrome на Ubuntu, я уже вижу, что заголовок перекрывает полосу прокрутки на несколько пикселей.
Теги:

2 ответа

0
Лучший ответ

Я нашел решение! Фокус в том, чтобы применить z-index: -1 к элементу content и удалить z-index из всех остальных элементов:

.outer {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 200px;
    height: 300px;
}

.top {
    position: absolute;
    height: 30px;
    width: 100%;
}

.body {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.content {
    position: relative;
    z-index: -1;
    margin-top: 30px;
}

Вот обновленная скрипка: http://jsfiddle.net/V4uL6/3/

Поделиться
0

Установите z-index на body на 1 или любое число, меньшее, чем z-index top.

EDIT: У вас по-прежнему проблема с скрытой полосой прокрутки, но, поскольку вы сказали, что хотите полосу прокрутки рядом, а не под заголовком, вы можете изменить это, отрегулировав ширину в классах контента.

Поделиться
  • 0
    да, я пробовал это раньше, но я не вижу, как я могу тогда удерживать заголовок от наложения полосы прокрутки. Как может помочь регулировка ширины содержимого?
  • 0
    Хм ... Я не уверен, что есть более элегантное решение, но если вы установите ширину body выше 100%, вы переместите полосу прокрутки на столько, чтобы выровнять ее идеально. Однако это означает, что вам необходимо сделать outer ширину, а также ширину каждого родительского элемента в процентах (вместо пикселей), потому что как только ширина браузера или размер / разрешение экрана изменятся, вы увидите что-то другое, и выравнивание будет потеряно. С другой стороны, это позволит вам иметь макет, который будет отображаться точно так же, как и для каждой возможной пользовательской конфигурации.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню