Position fixed in row (materialize)

Question

Position fixed in row (materialize)

Navigation

#1 by (1 votes)

0

I am working with materialize for my website and I have the following row:

<div class="row">
 <div class="col m3">contenido pequeño</div>
 <div class="col m6">Gran contenido</div>
 <div class="col m3">contenido pequeño</div>
</div>

The reason for my question is to know, how do I make the col m3 be static and that only the col m6 can be scrolled, what I want to do is similar to facebook, I have tried to do the following: style="position: fixed" but I have not obtained results

How can I solve it? I thank you in advance

html css materialize

asked by Dimoreno 17.10.2017 в 05:44

source

1 answer

Google Cloud configure YAML file for a website How to delete a file from a specific path in C ++

score 1 · Answer 1

To solve your problem you simply have to play with the fixed positions and the height of the content to which you want to apply the scroll, something like this:

.col{
    position: fixed;
    height: 100vh;
}

#columna_1{
    background: chocolate;
    top: 0;
    left: 0;
}

#columna_2{
    background: gray;
    overflow: auto;
}

#columna_2 > div{
    height: 5000px;
}

#columna_3{
    background: chocolate;
    top: 0;
    right: 0;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">


<div class="row">
    <div class="col m3" id="columna_1">contenido pequeño</div>
    <div class="col m6 offset-m3" id="columna_2">Gran contenido
        <div></div>
    </div>
    <div class="col m3" id="columna_3">contenido pequeño</div>
</div>