Полоса прокрутки по размеру окна только для одного div в вертикальном макете с несколькими div.

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

У меня есть страница с баннером (позиция: абсолютная), ниже которой находится div, содержащий два блока div. Второй блок div, в свою очередь, имеет другой div содержащий текст.

Я бы хотел, чтобы внутренний DIV отображал полосу прокрутки при изменении размера окна.

Я прочитал сообщение о том, что высота установлена на всех содержащихся элементах, я установил overflow-y: auto во всех нужных местах. Просто не работает.

Содержащий DIV выглядит следующим образом: http://i.imgur.com/oDHM4.png

Я хочу зеленой части для прокрутки, когда окно браузера изменяется (у-направление).

Прокручиваемые DIVs в любом дизайне настолько полезны ... но не должны быть такими трудными. Любая помощь оценивается.

Дэнни

MARKUP

Разметка очень просто:

<body> 
    <div id="page-header" style='background:blue;'>page-header</div> 
    <div id="page-content"> 
     <div id="configContent" style='height: inherit; background: steelblue;'> 
      <h1 id='panTitle'>Panel Title</h1> 
      <div id='panProbes' class='libPanel' style="background: maroon;"> 
       <p>panProbes</p>  
       <div id="probesCT1" class="configtable" style='background: red;'> 
        <p class='pTblTitle'>probesCT1</p> 
       </div> 
       <div id="probesCT2" class="configtable" style='background: grey;'> 
        <p>probesCT2</p> 
        <div id='pTbl' style='background: green;'> 
         <div class='pRow'>1st para in pTbl</div> 
         <div class='pRow'>some data</div> 
         <div class='pRow'>some data</div> 
         <div class='pRow'>some data</div> 
         <div class='pRow'>some data</div> 
         <div class='pRow'>some data</div> 
         <div class='pRow'>some data</div> 
         <div class='pRow'>some data</div> 
         <div class='pRow'>some more data</div> 
         <div class='pRow'>some more data</div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

** УКЛАДКИ **

Вот CSS вырубить к основной сущности:

html, body {  
    position:absolute; 
    margin: 0px; 
    padding: 0px; 
    height: 100%; 
    width: 1010px; 
    overflow: hidden; 
} 

#page-header { 
    position: absolute; 
    left: 5px; 
    top: 5px; 
    height: 60px; 
    width: 100%; 
} 

#page-content { 
    width: 100%; 
    height: 100%; 
    margin-top: 95px; 
} 

#configContent { 
    height: 100%; 
    width: 300px; 
    padding-left: 0px; 
    border-width: 3px; 
    margin-left: 30px; 
    margin-right: auto; 
} 

.libPanel { height: 100%; } 

#probesCT1 { width: 150px; margin: 0 auto 0 30px; } 
#probesCT2 { 
    width: 200px; 
    /* height: 100%; */ 
    margin: 0 30px 50px 30px; 
    padding: 0 10px 10px 10px; 
} 

#pTbl { overflow-y: auto; } 
.pRow { margin-bottom: 10px; }

источник

2012-03-10 Danny

В чем именно проблема u r? код '# probesCT2 { ширина: 200px; высота: 60%; margin: 0 30px 50px 30px; обивка: 0 10px 10px 10px; } #pTbl {overflow-y: auto; высота: 70%; } ' отлично работает для меня – redDevil

overflow-y: auto Для работы и создания полос прокрутки div должен иметь определенную высоту. Итак, in this example (с вашим html выше) Я установил его в 200px, что было меньше места, чем необходимо для отображения содержимого без полосы прокрутки, и, таким образом, показывает полосу прокрутки. Однако, если установлено значение 100%it does not work, так как 1) вам нужно раскомментировать высоту содержащихся divs, и 2) ваш контент в этом div меньше, чем необходимо для заполнения высоты div, поэтому не отображается полоса прокрутки. С большим количеством добавленного контента, you get a scroll bar.

Я думаю, что вы действительно хотите, чтобы вы всегда имели полосу прокрутки, если это необходимо, но даже тогда вам нужно убедиться, что div не распространяется под нижней частью страницы, или у вас все еще могут быть проблемы с сама полоса прокрутки идет со страницы. I've configured something, вероятно, больше, чем вы намерены, но обратите внимание, что для достижения эффекта мне пришлось использовать несколько вложенных элементов relative или absolute. Я также должен был догадываться о каком-то расположении высоты в верхней части элементов, чтобы очистить ваши заголовки.

источник

2012-03-10 19:57:43 ScottS

Полоса прокрутки по размеру окна только для одного div в вертикальном макете с несколькими div.

ответ

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