CSS margen superior se contrae cuando se contrae la ventana

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

  •  21-09-2019
  •  | 
  •  

Pregunta

Quiero un margen superior de mi página de 100px por ejemplo, cuando se maximiza la ventana, pero si el usuario cambia el tamaño de la ventana para que se contraiga Quiero que este margen se reduzca. El margen debe tener un tamaño mínimo de 10px ejemplo y debe reducirse en proporción a la altura de la ventana.

Un ejemplo, si lo que estoy tratando de emular es http://www.bing.com/

¿Cómo hago para implementar esto en CSS? Estoy stuggling con min-height, min-width, height y width en este momento.

Gracias.

¿Fue útil?

Solución

Sin ver algo de código, es difícil dar una gran sugerencia. Sin embargo, puede estilo el html y el cuerpo para ser el 100% de altura, que en realidad debería ajustarse a la altura de la parte visible del navegador: 

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

A partir de ahí, se puede añadir un div directamente en el cuerpo y darle que una altura que es un porcentaje: 

#push{ height: 15%; }

Su cuerpo html sería algo como: 

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

Cuando la altura del cuerpo cambia, también lo hará la altura de empuje. Es posible que tenga que ajustar ese número para obtener a su gusto. También se puede dar el empuje de un min-altura, pero que no es compatible con IE6. También, que el 100% html / cuerpo podría dar problemas más adelante dependiendo de cómo lo está haciendo el pie de página y las cosas, así que ten cuidado y buena suerte.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top