Div с полосой прокрутки внутри div с позицией: фиксированная

У меня есть div с позицией: fixed, который является моим контейнером div для некоторых меню. Я установил его сверху: 0px, bottom: 0px, чтобы всегда заполнять область просмотра. Внутри этого div я хочу иметь еще 2 divs, нижний из которых содержит много строк и имеет переполнение: auto. Я ожидал бы, что он будет содержаться в контейнере div, но если их слишком много, он просто расширяется за пределами фиксированного div. Ниже приведен мой код и скриншот, чтобы уточнить:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>MyPlan</title>
    <meta name="X-UA-COMPATIBLE" value="IE=8" />
    <style type="text/css">
        #outerfixed { position:fixed;  width:200px;  background-color:blue; padding:5px; top:0px; bottom:30px;}
        #innerstatic1 { width:100%; background-color:yellow; height:100px;}
        #innerstatic2 { overflow:auto; background-color:red; width:100%;}
    </style>
</head>
<body>
    <div id="outerfixed">
        <h3>OUTERFIXED</h3>
        <div id="innerstatic1">
            <h3>INNERSTATIC1</h3>
        </div>
        <div id="innerstatic2">
            <h3>INNERSTATIC2</h3>
            line<br />
                        ...lots of lines
            line<br />
        </div>
    </div>
</body>
</html>

Есть ли у меня способ сделать это? Опять же, я хочу, чтобы # innerstatic2 правильно содержался в #outerfixed и получал полосы прокрутки, если он больше, чем пространство, в котором оно находится внутри #outerfixed.

Я знаю, что есть некоторые возможности взломать это, также исправляя # innerstatic2, но мне бы очень хотелось, чтобы он находился внутри потока внутри #outerfixed, если это возможно, так что, если я буду перемещать #outerfixed где-то, появится внутренний элемент с ним.

EDIT: Я знаю, что могу установить переполнение: auto на #outerfixed и получить полосу прокрутки на всем протяжении, но я специально хочу прокрутку только на # innerstatic2, это сетка, и я хочу прокручивать только сетку.

Кто-нибудь? Возможно ли это?

Ответы

Ответ 1

Для этого существует двухэтапное решение, но оно имеет что-то вроде стоимости:

Добавьте overflow-y: scroll; в css для #innerstatic2.
определить height (или max-height) для #innerstatic2, иначе он не будет переполняться, он просто будет увеличивать свою высоту (по умолчанию для div есть height: auto).

Отредактировано, потому что иногда я просто не могу остановиться.

Я опубликовал демо на jsbin, чтобы показать реализацию jQuery, которая рассчитает для вас height ( он не обобщен, поэтому он будет работать только с вашим текущим html).

(function($) {
  $.fn.innerstaticHeight = function() {
        var heightOfOuterfixed = $('#outerfixed').height(),
        offset = $('#innerstatic2').offset(),
        topOfInnerstatic2 = offset.top,
        potentialHeight = heightOfOuterfixed - topOfInnerstatic2;

        $('#innerstatic2').css('height',potentialHeight);
  }
})(jQuery);

$(document).ready(
    function() {
        $('#innerstatic2').innerstaticHeight();
    }
);

Ответ 2

Я решил это, предоставив абсолютное положение ul и высоте 100%

ul {
  overflow-y: scroll;
  position: absolute;
  height: 100%;
}

проверьте этот FIDDLE

Ответ 3

overflow-y:scroll;

И добавьте это для устройств iOS. Это дает лучшую прокрутку, используя прикосновение. Переполнение-y нужно прокрутить! по соображениям безопасности. автоматическая работа для некоторых людей. или, по крайней мере, это то, что я слышал.

-webkit-overflow-scrolling: touch;

Ответ 4

вы должны установить высоту для наружной и максимальной высоты для innerstatic2

см. это может быть полезно DEMO

Ответ 5

Это контейнер-контейнер, который должен быть с атрибутом overflow: auto. В этом случае #outerfixed div

Ответ 6

Единственный способ, которым я рисую, - установить innerstatic2 в абсолютное положение (так что вы можете использовать верх и низ для его размера по отношению к внешнему виду), затем внутри innerstatic2 создайте другой div, в который вы вставляете свой текст. Затем вы даете innerstatic2 "переполнение: авто"; индикация. Недостатком этого метода является то, что innerstatic2 не движется вниз, когда innerstatic1 растет, поскольку он должен быть абсолютно. Если ему нужно двигаться, это должно быть "position: relative", но тогда вам нужно установить для него фиксированную высоту. Поэтому в любом случае вам нужно согласиться на компромисс.

Как только все браузеры поддерживают новые функции CSS3, такие как поддержка вычислений, будут доступны более эффективные варианты без этих недостатков.

Ответ 7

Не идеальный, но это должно дать вам 90% пути

<div style="position:fixed; bottom:1px; left:5em; height: 20em; width:20em; background-color:blue;">
        <div style ="width:15em; background-color: green;">
                Title
        </div>
        <div style ="background-color:yellow; max-height:80%; width:15em; overflow:auto;">
                <div style="height:100em; background-color:red; width:10em;">
                        scroll<br/>
                        scroll<br/>
                        scroll<br/>
                </div>  
        </div>  
</div>