div with scrollable content and fixed navbar

时间:2019-04-08 13:12:42

标签: html css scrollbar vertical-scrolling

I have an ASP.NET MVC partial view page that is split in several nested divs, one of those supposed to show a tree data structure made of folders and files. This is its html:

<div class="area-fascicolo">
    <div class="intestatario-fascicolo">
        <!-- current data title -->
    </div>
    <div class="consultazione-fascicolo">
        <div class="struttura-fascicolo">
            <!-- recursive folder structure -->
        </div>
        <div class="dettagli-fascicolo">
            <!-- details of selected file -->
        </div>
    </div>
</div>

As of now, I already had a vertical scrollbar for the two main divs struttura-fascicolo and dettagli-fascicolo:

.area-fascicolo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.consultazione-fascicolo {
    display: flex;
    justify-content: space-between;
    text-align: left;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.struttura-fascicolo {
    width: 40%;
    border: solid 1px #e3e3e3;
    border-radius: 4px;
    overflow: hidden;
}

This was all working perfect until now, because specs have changed (surprise!) and I have to put a fixed navbar within those divs.

I thought that making this simple change would've served the purpose:

Html:

<div class="area-fascicolo">
    <div class="intestatario-fascicolo">
        <!-- current data title -->
    </div>
    <div class="consultazione-fascicolo">
        <div class="struttura-fascicolo">
            <div class="bar">
                <!-- bar elements -->
            </div>
            <div class="albero-cartelle">
                <!-- recursive folder structure -->
            </div>
        </div>
        <div class="dettagli-fascicolo">
            <div class="bar">
                <!-- bar elements -->
            </div>
            <div id="AreaDettagli">
                <!-- details of selected file -->
            </div>
        </div>
    </div>
</div>

CSS:

.struttura-fascicolo {
    overflow: hidden;
}

.albero-cartelle{
    overflow-y: auto;
}

Non of these worked, the scrollbar is now totally gone. I went "manual"

.albero-cartelle{
    overflow-y: scroll;
}

but this only shows an empty scrollbar, without making the content actually scrollable.

enter image description here

What am I missing?

0 个答案:

没有答案