html - toda - div que ocupe todo el ancho de la pantalla
Un div con cambio de tamaño automático al cambiar el ancho de la ventana / altura (3)
En este escenario, el <div> exterior tiene un ancho y una altura del 90%. El div> interior tiene un ancho del 100% de su padre. Ambas escalan al redimensionar la ventana.
HTML
<div>
<div>Hello there</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
}
body > div {
width: 90%;
height: 100%;
background: green;
}
body > div > div {
width: 100%;
background: red;
}
Manifestación
He mirado por todas partes. y aún no se ha podido crear un código de muestra de una idea muy "básica":
Un div que toma el 90% del tamaño de la pantalla y se ajusta cada vez que cambia el tamaño del navegador (para tomar el 90% de la pantalla relativa)
Los divs anidados en su interior también deberían volver a dimensionarse.
es incluso posible?
EDITAR:
el 90% de ancho no funciona cuando trato de redimensionar verticalmente la pantalla.
Usa los atributos vh. Significa altura del viewport y es un porcentaje. Por lo tanto, la altura: 90vh significaría el 90% de la altura de la ventana gráfica. Esto funciona en la mayoría de los navegadores modernos.
P.ej.
div {
height: 90vh;
}
Puedes renunciar al resto de tus cosas 100% tontas en el cuerpo.
Si tiene un encabezado, también puede hacer algunas cosas divertidas, como tenerlo en cuenta utilizando la función de cálculo en CSS.
P.ej.
div {
height: calc(100vh - 50px);
}
Esto le dará el 100% de la altura de la ventana gráfica, menos 50px para su encabezado.
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 20px;
resize: both;
overflow: auto;
}
img{
height: 100%;
width: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize both the height and the width of this 1234567891011 div
element.
</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
<img src="images/scenery.jpg" alt="Italian ">
</div>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
</body>
</html>