1

Tenho uma div com position: fixed. Como faço para o height(Altura) se adaptar de acordo com a resolução da tela?

4
  • Se adaptar como exatamente?
    – bfavaretto
    Commented 8/05/2015 às 0:20
  • Por exemplo, tenho um formulário com uma div position:fixed Ok? Se eu exibo esse formulário em uma resolução por exemplo 1920x1080, o mesmo mostra todos os campos normalmente, no entanto, se eu exibo esse mesmo formulário em uma resolução 1024x768 alguns campos não são exibidos, pois a tela está fixa, e não tem como exibi-las. Commented 8/05/2015 às 0:37
  • 1
    Nesse caso você precisa retirar o position: fixed (com uma media query), senão o conteúdo vai ficar cortado nessas resoluções.
    – bfavaretto
    Commented 8/05/2015 às 1:08
  • 2
    Ou então utilize percentagens.
    – Edilson
    Commented 8/05/2015 às 9:22

2 Respostas 2

-1

É isto que pretendes? Os numeros só estão lá para poderes ter um scroll na página e ver o elemento fixo...

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>

0
-1

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;

6
  • 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
    – rLinhares
    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".
    – rLinhares
    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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .