How to adapt a div with position: Fixed?

Asked

Viewed 181 times

1

I have a div with position: fixed. How do I make for the height(Height) adapt according to screen resolution?

css

  • Adapt as exactly as?

  • For example, I have a form with a div position:Fixed Okay? If I display this form in a resolution for example 1920x1080, it shows all fields normally, however, if I display this same form in a resolution 1024x768 some fields are not displayed, because the screen is fixed, and there is no way to display them.

  • 1

    In that case you need to remove the position: fixed (with a media query), otherwise the content will get cut in these resolutions.

  • 2

    Or else use percentages.

2 answers

-1

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

http://jsfiddle.net/hy3cjazu/ 

.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>

-1

https://jsfiddle.net/9u1gxquf/1/

Take a look at this fiddle and tell me if that’s what you’re looking for.

The div on the right, 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 it a height in percent so that when the page shrank, it would hide the rest of the inputs, namely the blue-edged ones. This way it will hide due to the presence of overflow:Hidden;

  • While this link may answer the question, it is best to include the essential parts of the answer here and provide the link for reference. Replies per link only can be invalidated if the page with the link is changed. - Of Revision

  • @rLinhares I edited the question, do you think I have anything else to show? I tried to explain a little what I did and showed the css to change.

  • the question is that one should avoid answers per link; the link is nice to serve as reference but the answer should contain "the answer".

  • @But the answer is well indicated now or should I explain more?

  • @Since I noticed the -1 in the answer, I thought it was because it was poorly reworked so I asked.

  • 1

    @But thanks for what you said, I’ll try to improve the answers

Show 1 more comment

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.