html - tamaño - Haz un div 100% de altura de la ventana del navegador.
hacer que un div ocupe todo el alto (30)
Este material cambiará el tamaño de la altura del contenido automáticamente de acuerdo con su navegador. Espero que esto funcione para tí. Solo prueba este ejemplo dado abajo.
Tienes que configurar solo la height:100% .
html,body {
height:100%;
margin:0;
}
.content {
height:100%;
min-height:100%;
position:relative;
}
.content-left {
height:auto;
min-height:100%;
float:left;
background:#ddd;
width:50%;
position:relative;
}
#one {
background: url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png) center center no-repeat scroll #aaa;
width:50%;
position:relative;
float:left;
}
#two {
background: url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png) center center no-repeat scroll #520E24;
width:50%;
float:left;
position:relative;
overflow-y:scroll;
}
<div class=''content'' id=''one''></div>
<div class=''content-left'' id=''two''></div>
Tengo un diseño con dos columnas: un div izquierda y un div derecha.
El div derecho tiene un color de background-color gris, y lo necesito para expandir verticalmente dependiendo de la altura de la ventana del navegador del usuario. En este momento, el background-color termina en la última parte del contenido en esa div .
He intentado la height:100% , min-height:100%; etc.
100vw === 100% del ancho de la ventana gráfica.
100vh === 100% de la altura de la ventana gráfica.
Si desea configurar el ancho o alto de div 100% del tamaño de la ventana del navegador, debe usar
de ancho: 100vw
de altura: 100vh
o si desea establecer un tamaño más pequeño, use la calc function css calc function . Ejemplo:
#example { width: calc(100vw - 32px) }
Agregue min-height: 100% y no especifique una altura (o póngala en auto). Hizo el trabajo totalmente para mí:
.container{
margin: auto;
background-color: #909090;
width: 60%;
padding: none;
min-height: 100%;
}
Aquí hay algo que no es exactamente como lo que tenía arriba, pero podría ser útil para algunos.
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0px;
}
#one {
background-color: red;
}
#two {
margin-top: 0px;
background-color: black;
color: white;
overflow-y: scroll;
}
Aquí hay una solución para la altura.
En tu uso de CSS:
#your-object: height: 100vh;
Para el navegador que no soporta vh-units , use modernizr.
Agregar este script (para agregar detección para vh-units )
// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest(''cssvhunit'', function() {
var bool;
Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {
var height = parseInt(window.innerHeight/2,10),
compStyle = parseInt((window.getComputedStyle ?
getComputedStyle(elem, null) :
elem.currentStyle)["height"],10);
bool= !!(compStyle == height);
});
return bool;
});
Finalmente, use esta función para agregar la altura de la vista a #your-object si el navegador no admite vh-units :
$(function() {
if (!Modernizr.cssvhunit) {
var windowH = $(window).height();
$(''#your-object'').css({''height'':($(window).height())+''px''});
}
});
Aunque esta solución se realiza con jQuery I, puede ser útil para cualquier persona que haga columnas para ajustar el tamaño de la pantalla.
Para las columnas que comienzan en la parte superior de la página, esta solución es la más sencilla.
body,html{
height:100%;
}
div#right{
height:100%
}
Para las columnas que no comienzan en la parte superior de la página (por ejemplo: si comienzan debajo del encabezado).
<script>
$(document).ready(function () {
var column_height = $("body").height();
column_height = column_height - 100; // 100 is the header height
column_height = column_height + "px";
$("#column").css("height",column_height);
});
</script>
El primer método aplica la altura del cuerpo a él y también a las columnas, lo que significa que es starting_pixels + height100% .
El segundo método obtiene la altura de la página que se muestra al usuario al obtener la altura del cuerpo y luego resta el tamaño del encabezado para saber cuánta altura queda para mostrar la columna.
En realidad, lo que funcionó mejor para mí es usar la propiedad vh, en mi aplicación de reacción en quería que el div coincidiera con el máximo de la página, incluso cuando se redimensionó la altura intentada : 100%; , desbordamiento-y: auto; , ninguno de ellos funcionó al establecer la altura: (su porcentaje) vh; funcionó como se esperaba. Nota: si está usando relleno, esquinas redondeadas, etc., asegúrese de restar esos valores de su porcentaje de propiedad vh o agregar altura extra y hacer que aparezcan barras de desplazamiento, aquí está mi ejemplo:
.frame {
background-color: rgb(33, 2, 211);
height: 96vh;
padding: 1% 3% 2% 3%;
border: 1px solid rgb(212, 248, 203);
border-radius: 10px;
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}
Esto es lo que funcionó para mí:
<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px;"> </div>
Use position:fixed lugar de position:absolute , de esa forma, incluso si se desplaza hacia abajo, la división se expandirá al final de la pantalla.
Esto funcionó para mí:
html, body {
height: 100%; /* IMPORTANT!!! stretches viewport to 100% */
}
#wrapper {
min-height: 100%; /* min. height for modern browser */
height:auto !important; /* important rule for modern Browser */
height:100%; /* min. height for IE */
overflow: hidden !important; /* FF scroll-bar */
}
Tomado de esta página .
Hay un par de unidades de medida CSS3 llamadas:
Viewport-Porcentaje (o Viewport-Relative) longitudes
¿Qué son las longitudes visuales-porcentuales?
De la Recomendación del candidato W3 enlazada arriba:
Las longitudes porcentuales de la ventana gráfica son relativas al tamaño del bloque inicial que contiene. Cuando se cambia la altura o el ancho del bloque que contiene inicial, se escalan en consecuencia.
Estas unidades son vh (altura de la ventana vmin ), vw (ancho de la ventana vmin ), vmin (longitud mínima de la ventana vmin ) y vmax (longitud máxima de la ventana vmin ).
¿Cómo se puede usar esto para hacer que un divisor llene la altura del navegador?
Para esta pregunta, podemos hacer uso de vh : 1vh es igual al 1% de la altura de la ventana 1vh . Es decir, 100vh es igual a la altura de la ventana del navegador, independientemente de dónde se encuentre el elemento en el árbol DOM:
HTML
<div></div>
CSS
div {
height:100vh;
}
Esto es, literalmente, todo lo que se necesita. Aquí hay un ejemplo de JSFiddle en uso.
¿Qué navegadores soportan estas nuevas unidades?
Esto se admite actualmente en todos los navegadores principales actualizados, aparte de Opera Mini. Echa un vistazo a ¿Puedo usar ... para obtener más ayuda.
¿Cómo se puede usar esto con múltiples columnas?
En el caso de la pregunta en cuestión, con un divisor izquierdo y derecho, aquí hay un ejemplo de JSFiddle que muestra un diseño de dos columnas que incluye vh y vw .
¿Cómo es 100vh diferente al 100% ?
Toma este diseño por ejemplo:
<body style="height:100%">
<div style="height:200px">
<p style="height:100%; display:block;">Hello, world!</p>
</div>
</body>
La etiqueta p aquí se establece en 100% de altura, pero debido a que su div contiene 200px de altura, el 100% de 200px se convierte en 200px, no el 100% de la altura del body . Usar 100vh en 100vh lugar significa que la etiqueta p será 100% de altura del body independientemente de la altura div . ¡Echa un vistazo a este JSFiddle que acompaña para ver fácilmente la diferencia!
Hay varios métodos disponibles para establecer la altura de un <div> al 100%.
Método (A):
html,
body {
height: 100%;
min-height: 100%;
}
.div-left {
height: 100%;
width: 50%;
background: green;
}
.div-right {
height: 100%;
width: 50%;
background: gray;
}
<div class="div-left"></div>
<div class="div-right"></div>
Método (B) utilizando vh:
html,
body {
height: 100%;
min-height: 100%;
}
.div-left {
height: 100vh;
width: 50%;
background: green;
float: left;
}
.div-right {
height: 100vh;
width: 50%;
background: gray;
float: right;
}
<div class="div-left"></div>
<div class="div-right"></div>
Método (c) usando la caja de flexión:
html,
body {
height: 100%;
min-height: 100%;
}
.wrapper {
height: 100%;
min-height: 100%;
display: flex;
}
.div-left {
width: 50%;
background: green;
}
.div-right {
width: 50%;
background: gray;
}
<div class="wrapper">
<div class="div-left"></div>
<div class="div-right"></div>
</div>
Los elementos de bloque consumen todo el ancho de su padre, de forma predeterminada.
Así es como cumplen con sus requisitos de diseño, que es apilar verticalmente.
9.4.1 Contextos de formato de bloque
En un contexto de formato de bloque, los cuadros se colocan uno tras otro, verticalmente, comenzando en la parte superior de un bloque contenedor.
Este comportamiento, sin embargo, no se extiende a la altura.
De forma predeterminada, la mayoría de los elementos son la altura de su contenido ( height: auto ).
A diferencia de la anchura, debe especificar una altura si desea espacio adicional.
Por lo tanto, tenga en cuenta estas dos cosas:
- a menos que desee un ancho completo, debe definir el ancho de un elemento de bloque
- a menos que desee altura de contenido, debe definir la altura de un elemento
.Contact {
display: flex; /* full width by default */
min-height: 100vh; /* use full height of viewport, at a minimum */
}
.left {
flex: 0 0 60%;
background-color: tomato;
}
.right {
flex: 1;
background-color: pink;
}
body { margin: 0; } /* remove default margins */
<div class="Contact">
<section class="left">
<div class="">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
</div>
</section>
<section class="right">
<img />
</section>
</div>
Más fácil:
html,
body {
height: 100%;
min-height: 100%;
}
body {
position: relative;
background: purple;
margin: 0;
padding: 0;
}
.fullheight {
display: block;
position: relative;
background: red;
height: 100%;
width: 300px;
}
<html class="">
<body>
<div class="fullheight">
This is full height.
</div>
</body>
</html>
Necesitas hacer dos cosas, una es establecer la altura al 100% que ya hiciste. Segundo se establece la posición en absoluto. Eso debería hacer el truco.
html,
body {
height: 100%;
min-height: 100%;
position: absolute;
}
No mencionas algunos detalles importantes como:
- ¿Es la disposición de ancho fijo?
- ¿Alguna o ambas columnas tienen un ancho fijo?
Aquí hay una posibilidad:
body,
div {
margin: 0;
border: 0 none;
padding: 0;
}
html,
body,
#wrapper,
#left,
#right {
height: 100%;
min-height: 100%;
}
#wrapper {
margin: 0 auto;
overflow: hidden;
width: 960px; // width optional
}
#left {
background: yellow;
float: left;
width: 360px; // width optional but recommended
}
#right {
background: grey;
margin-left: 360px; // must agree with previous width
}
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right"></div>
</div>
</body>
</html>
Hay muchas variaciones en esto dependiendo de qué columnas necesitan ser fijas y cuáles son líquidas. También puede hacer esto con posicionamiento absoluto, pero en general he encontrado mejores resultados (particularmente en términos de navegador cruzado) usando flotadores en su lugar.
Prueba el siguiente css:
html {
min-height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
}
#right {
min-height: 100%;
}
Prueba esto - probado
body {
min-height: 100%;
}
#right, #left {
height: 100%;
}
Puede usar vh en este caso que es relativo al 1% de la altura de la ventana gráfica ...
Eso significa que si desea cubrir la altura, simplemente use 100vh .
Mira la imagen que dibujo para ti aquí:
Prueba el fragmento que he creado para ti de la siguiente manera:
.left {
height: 100vh;
width: 50%;
background-color: grey;
float: left;
}
.right {
height: 100vh;
width: 50%;
background-color: red;
float: right;
}
<div class="left"></div>
<div class="right"></div>
Puedes usar display: flex y height: 100vh
html, body {
height: 100%;
margin: 0px;
}
body {
display: flex;
}
.left, .right {
flex: 1;
}
.left {
background: orange;
}
.right {
background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>
Puedes usar el siguiente CSS para hacer un div 100% de la altura de la ventana del navegador:
display: block;
position: relative;
bottom: 0;
height: 100%;
Puedes usar la unidad view-port en CSS:
HTML:
<div id="my-div">Hello World!</div>
CSS:
#my-div {
height:100vh; /*vh stands for view-port height, 1vh is 1% of screen height*/
}
Si desea establecer la altura de un <div> o cualquier elemento, debe establecer la altura de <body> y <html> en 100% también. A continuación, puede establecer la altura del elemento con 100% :)
Aquí hay un ejemplo:
body, html {
height: 100%;
}
#right {
height: 100%;
}
Si eres capaz de posicionar absolutamente tus elementos,
position: absolute;
top: 0;
bottom: 0;
Lo haría.
Si usas position: absolute; y jQuery, podrías usar
$("#mydiv").css("height", $(document).height() + "px");
Todas las demás soluciones, incluida la mejor votada con vh son subóptimas en comparación con la solución del modelo flexible .
Con la llegada del modelo CSS flex , resolver el problema del 100% de altura se vuelve muy, muy fácil: use height: 100%; display: flex height: 100%; display: flex en el elemento principal y flex: 1 en los elementos secundarios. Automáticamente ocuparán todo el espacio disponible en su contenedor.
Tenga en cuenta lo simples que son el marcado y el CSS. No hay hacks de mesa ni nada.
El modelo flex es compatible con todos los principales navegadores , así como con IE11 +.
html, body {
height: 100%;
}
body {
display: flex;
}
.left, .right {
flex: 1;
}
.left {
background: orange;
}
.right {
background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>
Aprenda más sobre el modelo flex aquí.
Trate de establecer la height:100% en html y body
html,
body {
height: 100%;
}
Y si desea 2 div divisen el mismo uso o establezca la display:flex elemento padre display:flex propiedad display:flex .
Una de las opciones es usar la tabla CSS. Tiene un gran soporte de navegador, incluso funciona en IE8.
html, body {
height: 100%;
margin: 0;
}
.container {
display: table;
width: 100%;
height: 100%;
}
.left, .right {
display: table-cell;
width: 50%;
}
.right {
background: grey;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
simplemente use la unidad "vh" en lugar de "px", que significa altura de puerto de vista.
height:100vh;
Flexbox es un ajuste perfecto para este tipo de problema. Si bien es más conocido por distribuir el contenido en la dirección horizontal, Flexbox en realidad funciona igual de bien para problemas de diseño vertical. Todo lo que tiene que hacer es envolver las secciones verticales en un contenedor flexible y elegir cuáles desea expandir. Automáticamente ocuparán todo el espacio disponible en su contenedor.
html
//vw: hundredths of the viewport width.
//vh: hundredths of the viewport height.
//vmin: hundredths of whichever is smaller, the viewport width or height.
//vmax: hundredths of whichever is larger, the viewport width or height.
<div class="wrapper">
<div class="left">
Left
</div>
<div class="right">
right
</div>
</div>
css
<style>
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height:100vh; // height window (vh)
}
.wrapper .left{
widht:80%; // width optional but recommended
}
.wrapper .right{
widht:20%; // width optional but recommended
background-color: #dd1f26;
}
<style>