How to adapt a div with position: fixed?

Is this what you want? The numbers are only there so you can have a scroll on the page and see the fixed element ...

link

.fixed
{
    position: fixed;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid red;
}

1<br/>
2<br/>
3<br/>
4<br/>
5<br/>
6<br/>
7<br/>
8<br/>
9<br/>
10<br/>
11<br/>
12<br/>
13<br/>
14<br/>
15<br/>
16<br/>
17<br/>
18<br/>
19<br/>
20<br/>
21<br/>
22<br/>
23<br/>
24<br/>
25<br/>
26<br/>
27<br/>
28<br/>
29<br/>
30<br/>
31<br/>
32<br/>
33<br/>
34<br/>
35<br/>
<div class="fixed">CONTEUDO</div>

link

See this fiddle and tell me if it's what you're looking for.

The right div, that is right , is an example div with the requested specifications

.right{
   width:100px;
   background: rgba(0,0,0,0.5);
   color:white;
   height: 40%;
   position:fixed;
   right:0;
   top:40%;
   overflow:hidden;
}

What I did was, I gave a height in% so that when the page shrunk, hide the rest of the inputs, ie the ones with blue border. This way it will hide due to the presence of overflow: hidden;