Tenho uma div com position: fixed
. Como faço para o height
(Altura) se adaptar de acordo com a resolução da tela?
2 Respostas
É isto que pretendes? Os numeros só estão lá para poderes ter um scroll na página e ver o elemento fixo...
.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>
https://jsfiddle.net/9u1gxquf/1/
Veja este fiddle e diga-me se é o que procura.
A div da direita, ou seja right
é uma div de exemplo com as especificações pedidas
.right{
width:100px;
background: rgba(0,0,0,0.5);
color:white;
height: 40%;
position:fixed;
right:0;
top:40%;
overflow:hidden;
}
O que eu fiz foi, dei uma altura em % para que quando a página encolhesse, escondesse o resto dos inputs, ou seja os com borda azul. Deste modo ele irá esconder devido à presença do overflow:hidden;
-
Embora este link possa responder à pergunta, é melhor incluir as partes essenciais da resposta aqui e fornecer o link para referência. As respostas apenas por link podem ser invalidadas se a página com o link for alterada. - Da Revisão Commented 18/09/2017 às 16:23
-
@rLinhares Editei a pergunta, acha que tenho mais alguma coisa a mostrar? Tentei explicar um pouco o que fiz e mostrei a css a alterar. Commented 18/09/2017 às 16:38
-
a questão é que deve-se evitar respostas por link; o link é legal pra servir como referência mas a resposta deve conter "a resposta". Commented 18/09/2017 às 16:43
-
@rLinhares Mas a resposta está bem indicada agora ou devo explicar mais? Commented 18/09/2017 às 16:50
-
1@rLinhares Mas obrigado pelo que disse, vou tentar melhorar as respostas Commented 18/09/2017 às 17:10
position: fixed
(com uma media query), senão o conteúdo vai ficar cortado nessas resoluções.