A margem superior do CSS diminui quando a janela encolhe

StackOverflow https://stackoverflow.com/questions/1966899

  •  21-09-2019
  •  | 
  •  

Pergunta

Eu quero uma margem superior para minha página da web de Say 100px quando a janela for maximizada, mas se o usuário redimensionar a janela para encolhê -la, quero que essa margem encolher. A margem deve ter um tamanho mínimo de 10px e encolher a proporção da altura da janela.

Um exemplo se o que estou tentando imitar é http://www.bing.com/

Como eu implementaria isso no CSS? Estou enfrentando min-height, min-width, height e width no momento.

Obrigado.

Foi útil?

Solução

Sem ver algum código, é difícil dar uma ótima sugestão. Porém, você pode estilizar o HTML e o corpo como 100% de altura, o que deve realmente estar em conformidade com a altura da parte visível do navegador:

html, body{ margin:0; padding:0; height:100%; }

A partir daí, você pode adicionar uma divisão diretamente ao corpo e dar uma altura que é uma porcentagem:

#push{ height: 15%; }

Seu corpo HTML seria algo como:

<body>
    <div id="push"></div>
    <div>
        asdf asdf
    </div>
</body>

Quando a altura do corpo mudar, também a altura do empurrão. Pode ser necessário ajustar esse número para obter o seu gosto. Você também pode dar a altura da push uma altura, mas isso não é suportado no IE6. Além disso, esse 100% HTML / corpo pode causar problemas posteriormente, dependendo de como você está fazendo seu rodapé e coisas, portanto, cuidado e boa sorte.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top