Полоса прокрутки при изменении размера окна только для одного элемента в многослойном вертикальном расположении - PullRequest
Новая
       42

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

0 голосов
/ 10 марта 2012

Я занимался этим несколько дней и прочитал все мыслимые статьи о css, overflow и layout.

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

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

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

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

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

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

Дэнни

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>

** STYLING**

Вот 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; }

1 Ответ

0 голосов
/ 10 марта 2012

Чтобы overflow-y: auto работал и создавал полосы прокрутки, для div должна быть установлена ​​конкретная высота.Так что в этом примере (с вашим HTML выше) я установил его на 200px, что было меньше места, чем необходимо для отображения содержимого без полосы прокрутки, и, таким образом, показывает полосу прокрутки.Однако, если установлено значение 100% , оно не будет работать , потому что 1) вам нужно раскомментировать высоту содержащихся в нем divов, и 2) ваш контент в этом div меньше необходимого для заполнения высотыdiv, поэтому полоса прокрутки не отображается.Добавив больше контента, вы получите полосу прокрутки .

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

...