Marge supérieure CSS se rétrécit lorsque la fenêtre se rétrécit

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

  •  21-09-2019
  •  | 
  •  

Question

Je veux une marge supérieure pour ma page web de dire 100px lorsque la fenêtre est agrandie, mais si l'utilisateur redimensionne la fenêtre pour rétrécir Je veux que cette marge se rétrécir. La marge devrait avoir une taille minimale de dire 10px et devrait diminuer proportionnellement à la hauteur de la fenêtre.

Un exemple si ce que je suis en train d'imiter est http://www.bing.com/

Comment pourrais-je aller sur la mise en œuvre cela en CSS? Je stuggling avec min-height, min-width, height et width au moment.

Merci.

Était-ce utile?

La solution

Sans y voir un peu de code, il est difficile de donner une excellente suggestion. Mais, vous pouvez définir le style du html et le corps pour être une hauteur de 100%, ce qui devrait effectivement se conformer à la hauteur de la partie visible du navigateur: 

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

A partir de là, vous pouvez ajouter un div directement dans le corps et lui donne une hauteur qui est un pourcentage: 

#push{ height: 15%; }

Votre html corps ressemblerait à quelque chose comme: 

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

Lorsque la hauteur du corps change, il en sera la hauteur de poussée. Vous devrez peut-être modifier ce numéro pour obtenir à votre goût. Vous pouvez aussi donner une simple pression min hauteur, mais qui ne sont pas pris en charge dans IE6. En outre, plus tard 100% html / corps pourrait vous donner le problème selon la façon dont vous faites votre pied de page et les choses, alors méfiez-vous et bonne chance.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top