Div с полосой прокрутки внутри div с положением: исправлено - PullRequest
Новая
       14

Div с полосой прокрутки внутри div с положением: исправлено

39 голосов
/ 01 октября 2010

У меня есть div с позицией: исправлено, это мой контейнерный div для некоторых меню. Я установил его на top: 0px, bottom: 0px, чтобы всегда заполнять область просмотра. Внутри этого div я хочу иметь 2 других div, нижний из которых содержит много строк и имеет переполнение: 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>

alt text

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

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

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

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

Ответы [ 7 ]

38 голосов
/ 01 октября 2010

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

  1. Добавьте overflow-y: scroll; к CSS для #innerstatic2.
  2. . Определите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();
    }
);
18 голосов
/ 06 августа 2014

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

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

проверить эту СКИДКУ

5 голосов
/ 14 мая 2014

overflow-y:scroll;

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

-webkit-overflow-scrolling: touch;

2 голосов
/ 24 сентября 2012

Вы должны установить высоту для внешнего фиксированного значения и максимальную высоту для innerstatic2

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

1 голос
/ 20 января 2011

Не идеально, но это даст вам 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>
1 голос
/ 01 октября 2010

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

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

1 голос
/ 01 октября 2010

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

...