Используйте полную ширину, исключая полосу прокрутки переполнения с «position: absolute»

Я хотел бы иметь маленький красный div с полной шириной в фиксированной верхней позиции, внутри другого div, который имеетoverflow: scroll, Я надеюсь, что jsFiddle дает понять:http://jsfiddle.net/mCYLm/2/.

Проблема в том, что красный div перекрывает полосу прокрутки. Похожеright: 0 означает правую частьdiv.wrapper; это не вычитает полосу прокруткиdiv.main, Когда я двигаюoverflow: scroll вdiv.wrapperтогда красное знамя имеет нужный размер (играть на скрипке). Однако он больше не находится в фиксированном положении (прокрутка вниз заставляет баннер прокручиваться вверх).

Как я могу достичь следующих двух вещей вместе?

The red banner is at the fixed position like in this fiddle. The red banner has full width except the scrollbar like in this fiddle.

Мне бы хотелось, чтобы это работало в Google Chrome.

HTML:

<div class="wrapper">
    <div class="red-banner"></div>
    <div class="main">
        <div class="item">foo</div>
        <div class="item">foo</div>
        <div class="item">foo</div>
        <div class="item">foo</div>
    </div>
</div>​

CSS:

div.wrapper {
    position: relative;
}

div.main {
    height: 200px;
    overflow-y: scroll;
}

div.item {
    border: 1px solid black;
    margin: 20px;
    padding: 20px;
}

div.red-banner {
    background-color: red;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 20px;
}
 Gabriele Petrioli11 июн. 2012 г., 18:14
Вы могли бы изменитьright свойство, соответствующее ширине полосы прокрутки ... Требуется JS, чтобы убедиться, что любая полоса прокрутки будет правильно измерена.
 Qtax11 июн. 2012 г., 17:46
Почему бы просто не расположить прокручиваемый элемент под панелью? подобноin this example, Это единственный простой способ, которым я вижу, что вы могли бы сделать это.
 pimvdb11 июн. 2012 г., 18:27
@Gaby aka G. Petrioli: Да, это работает, спасибо. Это, однако, не очень удовлетворительно. Я продолжу с этим, если не будет никаких ответов только для CSS.
 pimvdb11 июн. 2012 г., 17:48
В моем реальном приложении вместо красного у меня есть градиент от белого к прозрачному, чтобы иметь хороший эффект для текста, который прокручивается из контейнера. К сожалению, этот эффект невозможен, потому что баннер / контейнер разделены.
 Qtax11 июн. 2012 г., 17:50
@pimvdb, я понимаю, тогда вы хотите соления (если хотите избежать JS). Возможно, вы могли бы использовать стилизованные полосы прокрутки CSS, которые поддерживает Chrome, которые по крайней мере дали бы вам фиксированную ширину, которую вы могли бы использовать. Или, может быть, есть хороший хакер CSS3.

Ответы на вопрос(2)

Решение Вопроса

что это невозможно с чистым CSS, так что здесь хак JavaScript (jQuery):

$(function() {
  var $container = $("<div>").css({ height: 1, overflow: "scroll" }).appendTo("body");
  var $child = $("<div>").css({ height: 2 }).appendTo($container);
  window.SCROLLBAR_WIDTH = $container.width() - $child.width();
  $container.remove();
});

затем:

$("div.red-banner").css({
  right: SCROLLBAR_WIDTH
});
 pimvdb11 июн. 2012 г., 19:11
@Qtax: Woops, я должен был смотреть на это слишком долго. Спасибо!
 pimvdb14 июн. 2012 г., 12:40
@Both: я принял этот ответ, потому что это было единственное решение без побочных эффектов. Я проголосовал за вас обоих; Спасибо за всю вашу помощь.
 11 июн. 2012 г., 19:08
Не нужно использоватьcalcПросто установитеright вместо,right: SCROLLBAR_WIDTH + "px".

HTML

    <div class="banner-wrapper">
        <div class="banner"></div>
    </div>
</div>

<div class="main">
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
</div>​

CSS

* { margin: 0; padding: 0 }
body {
    padding-top: 30px;
}

div.main {
    height: 200px;
    width: 100%;
    overflow-y: scroll;
    position: absolute;
    z-index: 50;
    background: -webkit-gradient(linear, center top, center bottom, from(white), to(rgba(255,255,255,0)));
}

div.item {
    border: 1px solid black;
    margin: 20px;
    padding: 20px;
}

div.scroller {
    height: 20px;
    width: 100%;
    position: absolute;
    z-index: 100;
    overflow: hidden;
}

div.banner-wrapper {
    background: transparent;
    position: relative;
    height: 20px;
    overflow-y: scroll;
    left: 0;
    margin-right: -20px;
}
div.banner {
    height: 20px;
    background: -webkit-gradient(linear, center top, center bottom, from(white), to(rgba(255,255,255,0)));;
    margin-left: 20px;
    margin-right: 40px;
}

Версия для разработки:http://jsfiddle.net/mCYLm/13/
Окончательный вариант:http://jsfiddle.net/mCYLm/14/

Работает с масштабированием и переменной шириной области просмотра.
! BUG: Кнопка прокрутки справа вверху недоступна / не активна

Проверено в:

IE6,7,8,9 (windows) FF11 (Windows) Google Chrome 18 (ubuntu) Safari 5.1 (OSX)
 11 июн. 2012 г., 17:41
Это не исправляет это, оно просто помещает прокручиваемый элемент над полосой.
 11 июн. 2012 г., 18:47
@pimvdb Итак, наконец, решение только для CSS:jsfiddle.net/mCYLm/9, Теперь я отредактирую свой ответ новой информацией о том, как его использовать. Возможно, вам придется заменить DataURI в соответствии с вашими потребностями.
 pimvdb11 июн. 2012 г., 17:40
Большое спасибо, но текст теперь перекрывает баннер. Идея заключалась в том, что баннер вместо текста перекрывает (как в скрипке). Вы бы знали, возможно ли это?
 pimvdb11 июн. 2012 г., 18:54
Да спасибо! Я использую-webkit-gradient, который прекрасно работает, если я подключу его к вашему коду:jsfiddle.net/mCYLm/10, Это требует жесткого кодирования ширины баннера, ну да ладно.
 11 июн. 2012 г., 18:50
@Qtax Я исправил это сейчас:jsfiddle.net/mCYLm/9

Ваш ответ на вопрос