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

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

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

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

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

источник

2010-10-01 Einar Egilsson

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

источник

2010-10-01 07:00:08

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

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

Добавить 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(); 
    } 
);

источник

2010-10-01 07:01:14

Благодарим вас за ответ. На самом деле это в значительной степени то, что у нас есть сегодня, вычисление правильной высоты для # innerstatic2 и установка с помощью jquery. Но это вызывает проблемы с сторонним компонентом, который неправильно вычисляет некоторые размеры, когда мы возимся с этим в документе, готовым, поэтому именно поэтому я действительно хотел получить чистое решение CSS. –

Итак, нет ли способа принудительного прокрутки на # innerstatic2, установив высоту на #outerfixed? Из того, что я пробовал, похоже, нет, # innerstatic2 просто течет снаружи, если я устанавливаю явную высоту на #outerfixed, но это потому, что это позиция: исправлена? –

Это может быть так. Вы также можете добавить 'overflow: hidden' в css для' # outerfixed', но это, к сожалению, не выглядит * особенно красивым. –

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

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

источник

2010-10-01 15:41:14

Не идеально, но это вы должны получить 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>

источник

2011-01-20 19:39:35 SooDesuNe

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

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

источник

2012-09-24 06:29:06 Afshin

overflow-y:scroll;

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

-webkit-overflow-scrolling: touch;

источник

2014-05-14 17:46:47 Dyrehauge

Я решил его, давая абсолютную позицию на ул и высотой 100%

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

check out this FIDDLE

источник

2014-08-06 07:50:26

Это решение скрывает нижний конец 'ul' (он не показывает последний экземпляр' li') – sjbuysse

спасибо, спасли мою жизнь :) –

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

ответ

Смежные вопросы